#reactjs component for rendering React components w/ editable source and live preview #JavaScript

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

    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:

    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.
  • An example file would look like:

    When evaluating the JSX, it needs to be provided a scope object.

  • 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

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

@dimensionmedia: #reactjs component for rendering React components w/ editable source and live preview #JavaScript

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

demo revert es6 variables Apr 19, 2017

docs small typo Feb 18, 2017

test/client use prop-types package, organize package.json Apr 19, 2017

.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-test Bringing build/test/lint setup up to our modern standards. Will fix l… Sep 18, 2015

.gitignore add coverage to .gitignore Apr 19, 2017

.npmignore Ignore source map files Feb 25, 2016

.travis.yml disable node6 tests May 18, 2017

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

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

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:

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:

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:

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’.

React.PropTypes.bool

Allows the user to collapse the code block.

React.PropTypes.bool

Makes collapsable code block initially expanded.

React.PropTypes.node

A component class that will be used to auto-generate docs based on that component’s

. See

below for how to annotate the generate prop docs.

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

React.PropTypes.bool

Turns preview into a simple console for testing out ES6 code. Use

in the playground to generate output.

React.PropTypes.bool

Defaults to true. If set to false, allows you bypass the

‘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

method be in your code

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub