A component for rendering React components with editable source and live preview
npm install component-playground

https://formidable.com/open-source/component-playground/
``sh`
npm install component-playground
In the head of your html document, either add the css files from the demo or from a CDN like:
`html`
In your JSX, require the component and use it like this:
`javascript
'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 (
ReactDOM.render(
`
#### 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:
`js`
#### 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:
`js`
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.
String specifying which CodeMirror theme to initialize with. Defaults to 'monokai'.
Allows the user to collapse the code block.
`js`
Makes collapsable code block initially expanded.
`js`
initiallyExpanded={true}
codeText={componentExample}
scope={{React: React}}/>
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.
`js`
Annotation map for the docClass. The key is the prop to annotate, the value is the description of that prop.
`js`
propDescriptionMap={{
collapsableCode: "Allows the user to collapse the code block"
}}
codeText={componentExample}
scope={{React: React}}/>
Turns preview into a simple console for testing out ES6 code. Use console.log() in the playground to generate output.
`js`
codeText={es6Example} />
Defaults to true. If set to false, allows you bypass the component-playground's component wrapper and render method.React.render
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 method be in your code
` Hijs
var ComponentExample = React.createClass({
render: function() {
return (
)
}
});
React.render(
`
There are multiple options when it comes to live, editable React component environments. Formidable actually has two first class projects to help you out: component-playground and react-live. Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you.
Here's a high-level decision tree:
- If you want fast and easy setup and integration, then component-playground may be the ticket!react-live
- If you want a smaller bundle, SSR, and more flexibility, then is for you!
Here are the various factors at play:
- Build: component-playground uses babel-standalone, react-live uses bublé. (_Note_: react-live might make transpiler customizable in the future).component-playground
- Bundle size: has a larger bundle, but uses a more familiar editor setup. react-live is smaller, but more customized editor around prism.react-live
- Ease vs. flexibility: is more modular/customizable, while component-playground is easier/faster to set up.component-playground
- SSR: is not server-side renderable, react-live is.component-playground
- Extra features: supports raw evaluation and pretty-printed output out-of-the-box, while react-live does not.component-playground
- Error handling: might have more predictable error handling than react-live in some cases (due to react-dom`, although this might change with React 16).