A component for rendering React Components and ES6 code with editable source and live preview

![Component Playground] (http://i.imgur.com/se3avpr.png)

###Demo

http://projects.formidablelabs.com/component-playground

###Installation

npm install component-playground 

###Set up

In your html document, add the required CodeMirror scripts at the bottom, before your bundle script:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>

In the head of your document, either add the css files from the demo or from a CDN like:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css"/> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/monokai.min.css"/>

In your JSX, require the component as use it like this:

'use strict'; var React = require('react/addons'); var Playground = require('component-playground'); var Button = require('./components/button'); var componentExample = require("raw!./examples/component.example"); var Index = React.createClass({ render() { return ( <div className="component-documentation"> <Playground codeText={componentExample} scope={{React: React, Button: Button}}/> </div> ); } }); React.render(<Index/>, document.getElementById('root'));

###Props

####codeText React.PropTypes.string.isRequired

codeText takes a string of JSX markup as its value. While you can just pass it a string, I find it is easier to make a separate file and use Webpack's raw loader to load in the raw source. In the example above I use the .example extension, and an examples folder to organize my samples.

An example file would look like:

<Button style={{background: '#3498db'}}>Hi</Button> 

####scope React.PropTypes.object.isRequired

When evaluating the JSX, it needs to be provided a scope object. At the very least, React needs to be provided to the scope, if any custom tags aren't being used. See below:

<Playground codeText={componentExample} scope={{React: React}}/> 

Any module/component that is used inside the playground needs to be added to the scope object. See /demo for an example of how this works.

###theme React.PropTypes.string

String specifying which CodeMirror theme to initialize with. Defaults to 'monokai'.

###collapsableCode React.PropTypes.bool

Allows the user to collapse the code block.

<Playground collapsableCode={true} codeText={componentExample} scope={{React: React}}/> 

###docClass React.PropTypes.node

A component class that will be used to auto-generate docs based on that component's propTypes. See propDescriptionMap below for how to annotate the generate prop docs.

<Playground docClass={MyComponent} codeText={componentExample} scope={{React: React}}/> 

###propDescriptionMap React.PropTypes.string

Annotation map for the docClass. The key is the prop to annotate, the value is the description of that prop.

<Playground docClass={MyComponent} propDescriptionMap={{ collapsableCode: "Allows the user to collapse the code block" }} codeText={componentExample} scope={{React: React}}/> 

###es6Console React.PropTypes.bool

Turns preview into a simple console for testing out ES6 code. Use console.log() in the playground to generate output.

<Playground es6Console={true} codeText={es6Example} /> 

###noRender - (Deprecated, Remove at 1.x) React.PropTypes.bool

If set to false, allows you bypass the component-playground's component wrapper and render method. You can use this option to write higher order components directly in your example code and use your own Render method. NODE: This option requires that the React.render method be in your code Deprecated in favor of writing example components. See #19 for more information

var ComponentExample = React.createClass({ render: function() { return ( <p>Hi</p> ) } }); React.render(<ComponentExample/>, mountNode);