react demo component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.babelrc
.editorconfig
.gitignore
README.md
package.json
webpack-dist.config.js
webpack.config.js

README.md

Npm Package Npm Downloads Dependency Status

中文文档

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.

redemo

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 react-docgen@next 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