component-playground

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);