Name Picker Malfunction

    @azazdeaz/component-playground

    2.0.1 • Public • Published

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

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

    Install

    npm i @azazdeaz/component-playground

    DownloadsWeekly Downloads

    15

    Version

    2.0.1

    License

    MIT

    Last publish

    Collaborators

    • azazdeaz