imweb / Redemo
react demo component
Stars: ✭ 60
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Redemo
React Native Swipeable Cards Demo
Facebook-style swipeable cards with React Native Interactable.
Stars: ✭ 36 (-40%)
Mutual labels: demo, component
Helloworld Msa
Main repository with documentation and support files
Stars: ✭ 218 (+263.33%)
Mutual labels: documentation, demo
Vue Live
A component to demo components, inspired by react-live
Stars: ✭ 123 (+105%)
Mutual labels: documentation, demo
Entitycomponentsystemsamples
No description or website provided.
Stars: ✭ 4,218 (+6930%)
Mutual labels: documentation, component
Cp Design
A configurable Mobile UI Components(React hooks+Typescript+Scss)组件库
Stars: ✭ 465 (+675%)
Mutual labels: demo, component
Doctor
quick and easy documentation of Vue.js components - DEPRECATED
Stars: ✭ 227 (+278.33%)
Mutual labels: documentation, component
Dt54
Laravel 5.4 DataTables Demo Application (WIP)
Stars: ✭ 27 (-55%)
Mutual labels: documentation, demo
Getkirby.com
Source code and content for the Kirby website
Stars: ✭ 57 (-5%)
Mutual labels: documentation
Rest Hapi
🚀 A RESTful API generator for Node.js
Stars: ✭ 1,102 (+1736.67%)
Mutual labels: documentation
React Display Window
A simple tool to showcase react components
Stars: ✭ 57 (-5%)
Mutual labels: documentation
Multi Tenant App Demo
Demonstrates the discriminator field (shared schema) based multi-tenant application using Spring Boot & Hibernate 5.
Stars: ✭ 57 (-5%)
Mutual labels: demo
Region Picker
A region picker based on Vue and ElementUI.
Stars: ✭ 59 (-1.67%)
Mutual labels: component
Vue Seamless Scroll
🔰A simple, seamless scrolling for Vue.js vue无缝滚动component
Stars: ✭ 1,106 (+1743.33%)
Mutual labels: component
Reacom
ReaCOM has got a lot of tools to use and is related to component object model
Stars: ✭ 57 (-5%)
Mutual labels: component
Docs
Documentation for Tasmota (https://github.com/arendst/Tasmota)
Stars: ✭ 55 (-8.33%)
Mutual labels: documentation
redemo
When you write a react component, you may need tell others how to use it by write some demos. Redemo is used to help write demo for react component in a easy way, is't pretty and simple to use.
feature
- doc: write doc in markdown for this demo
- code: show source code for this demo
- propTypes: auto list react component
propTypes
document form comment in your component source instead of write by yourself
install
use it from npm in webpack
npm i redemo
then install webpack dependencies
npm i raw-loader [email protected] docgen-loader --save-dev
example
Let's write a demo for a Button
component
import ReDemo from 'redemo';
import Button from './button';
// load propTypes by docgen-loader from button component source code
const docgen = require('!!docgen-loader!../button');
// load source code by raw-loader from button component source code
const code = require('!!raw-loader!../button');
// write doc for this demo in markdown
const doc = `
### react component used to demonstrate react component
#### structure
- in top section is demo instance to play
- circle button in right are toggle for **component propTypes** and **demo source code**
- propTypes table show all prop's info for this component
- in bottom is source code for this demo
`
<ReDemo
className="my-demo"
docgen={docgen}
doc={doc}
code={code}
defaultCodeVisible
defaultPropTypeVisible
>
<Button>demo component instance</Button>
</ReDemo>
API
see ReDemo
's all props here
In practice
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].