A component for rendering React components with editable source and live preview
JavaScript CSS HTML
Permalink
Failed to load latest commit information.
demo Upgrade lodash to v4.13 May 31, 2016
dist Version 1.3.2 - Load codemirror JSX mode in browser only Jan 5, 2017
docs Change props to look like code instead of text Sep 22, 2016
src Conditionally import JSX codemirror mode for SSR Jan 5, 2017
test/client fix component import path Mar 9, 2016
.babelrc upgrade to babel 6 Feb 10, 2016
.editorconfig Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015
.eslintignore Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015
.eslintrc-base Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015
.eslintrc-node Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015
.eslintrc-react Fix a little lint Feb 25, 2016
.eslintrc-react-test Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015
.gitignore gitignore log files Feb 25, 2016
.npmignore Ignore source map files Feb 25, 2016
.travis.yml add npm3 to before_install Mar 9, 2016
CHANGELOG.md Update CHANGELOG Jan 5, 2017
CONTRIBUTING.md adding code of conduct for contributing Aug 22, 2016
DEVELOPMENT.md Update publish steps in DEVELOPMENT Feb 25, 2016
LICENSE Initial commit Apr 29, 2015
README.md Update README.md with dox link Nov 16, 2016
karma.conf.coverage.js Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015
karma.conf.dev.js Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015
karma.conf.js Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015
package.json Version 1.3.2 - Load codemirror JSX mode in browser only Jan 5, 2017
webpack.config.coverage.js Upgrade lodash to v4.13 May 31, 2016
webpack.config.dev.js build Oct 6, 2015
webpack.config.js fixing webpack config for babel 6 Mar 9, 2016
webpack.config.test.js Upgrade lodash to v4.13 May 31, 2016

README.md

Build Status

component-playground

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

Component Playground

Demo

https://formidable.com/open-source/component-playground/

Installation

npm install component-playground

Set up

In the head of your html 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 and use it like this:

'use strict';

var React = require('react/addons');
var ReactDOM = require('react-dom');
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>
    );
  }
});

ReactDOM.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}}/>

initiallyExpanded

React.PropTypes.bool

Makes collapsable code block initially expanded.

<Playground
  collapsableCode={true}
  initiallyExpanded={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

React.PropTypes.bool

Defaults to true. 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. NOTE: This option requires that the React.render method be in your code

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

React.render(<ComponentExample/>, mountNode);