https://github.com/imweb/redemo

react demo component
https://github.com/imweb/redemo

component demo documentation react

Last synced: 28 days ago
JSON representation

react demo component

• Host: GitHub
• URL: https://github.com/imweb/redemo
• Owner: imweb
• Created: 2017-04-28T08:28:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-30T07:43:00.000Z (over 6 years ago)
• Last Synced: 2024-11-12T23:49:35.926Z (about 1 month ago)
• Topics: component, demo, documentation, react
• Language: JavaScript
• Homepage: https://imweb.github.io/redemo/
• Size: 2.69 MB
• Stars: 60
• Watchers: 7
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Npm Package](https://img.shields.io/npm/v/redemo.svg?style=flat-square)](https://www.npmjs.com/package/redemo)

[![Npm Downloads](http://img.shields.io/npm/dm/redemo.svg?style=flat-square)](https://www.npmjs.com/package/redemo)

[![Dependency Status](https://david-dm.org/gwuhaolin/redemo.svg?style=flat-square)](https://npmjs.org/package/redemo)

[中文文档](https://github.com/gwuhaolin/blog/issues/1)

# 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

```bash

npm i redemo

```

then install webpack dependencies

```html

npm i raw-loader react-docgen@next docgen-loader --save-dev

```

## example

Let's write a demo for a `Button` component

```js

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

`

  demo component instance

```

## API

see `ReDemo`'s all props [here](https://imweb.github.io/redemo/)

## In practice

- [imuix](http://imweb.github.io/imuix/)