react-laboratory v0.1.1

This is experimental, not meant for public use

react-laboratory

Render documentation and prop combinations automatically from React components

How Does It Work?

It uses your component's propTypes and defaultProps to generate documentation and examples of your components with different prop combinations

Getting Started

Add react-examples to your project's dependencies

$ yarn add react-examples

Pass an array of components to ReactExamples, where each of the components has propTypes and defaultProps defined

import React from 'react'
import ReactDOM from 'react-dom'
import ReactExamples from 'react-examples'
import CoolComponent1 from './components/CoolComponent1'
import CoolComponent2 from './components/CoolComponent2'

ReactDOM.render(
  <ReactExamples components={[
    CoolComponent1,
    CoolComponent2,
  ]} />,
  document.getElementById('root')
)

Ensure that your production build is using NODE_ENV of development so that the propTypes and defaultProps will be available when you deploy

Notes

Because react-examples requires being deployed in a development mode, it is only recommended to be used for creating a documentation app, not for a user facing app

Contributing

See CONTRIBUTING.md