A component for rendering React Components and ES6 code with editable source and live preview
npm install component-playground
In the head of your html document, either add the css files from the demo or from a CDN like:
In your JSX, require the component and use it like this:
'use strict';var React = ;var ReactDOM = ;var Playground = ;var Button = ;var componentExample = ;var Index = React;ReactDOM;
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>
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.
String specifying which CodeMirror theme to initialize with. Defaults to 'monokai'.
Allows the user to collapse the code block.
<Playground collapsableCode=true codeText=componentExample scope=React: React/>
Makes collapsable code block initially expanded.
A component class that will be used to auto-generate docs based on that component's
propDescriptionMap below for how to annotate the generate prop docs.
<Playground docClass=MyComponent codeText=componentExample scope=React: React/>
Annotation map for the docClass. The key is the prop to annotate, the value is the description of that prop.
<PlaygrounddocClass=MyComponentpropDescriptionMap=collapsableCode: "Allows the user to collapse the code block"codeText=componentExamplescope=React: React/>
Turns preview into a simple console for testing out ES6 code. Use
console.log() in the playground to generate output.
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;React;
There are multiple options when it comes to live, editable React component environments. Formidable actually has two first class projects to help you out:
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-playgroundmay be the ticket!
- If you want a smaller bundle, SSR, and more flexibility, then
react-liveis for you!
Here are the various factors at play:
react-livemight make transpiler customizable in the future).
- Bundle size:
component-playgroundhas a larger bundle, but uses a more familiar editor setup.
react-liveis smaller, but more customized editor around
- Ease vs. flexibility:
react-liveis more modular/customizable, while
component-playgroundis easier/faster to set up.
component-playgroundis not server-side renderable,
- Extra features:
component-playgroundsupports raw evaluation and pretty-printed output out-of-the-box, while
- Error handling:
component-playgroundmight have more predictable error handling than
react-livein some cases (due to
react-dom, although this might change with React 16).