React Component Playground

Minimal frame for loading and testing React components in isolation.

Working with ComponentPlayground improves the component design because it surfaces any implicit dependencies. It also forces you to define sane inputs for every component, making them more predictable and easier to debug down the road.

React compatibility:

• [email protected] with [email protected] and below
• [email protected] with [email protected] and above

Features include:

• Rendering full-screen components or with the navigation pane on the side.
• Injecting predefined state into components via ComponentTree
• Real-time editing of props and state with instant feedback

Before diving deeper, you need to understand what a component fixture looks like. It's the same thing as a snapshot in the ComponentTree utility. Read more on the project README.

components is by far the most important of the ComponentPlayground props. This is an example:

{
  ComponentOne: {
    class: require('./components/ComponentOne.jsx'),
    fixtures: {
      normal: {
        fooProp: 'bar'
      },
      paused: {
        fooProp: 'bar',
        state: {
          paused: true
        }
      }
    }
  },
  ComponentTwo: {
    class: require('./components/ComponentTwo.jsx'),
    fixtures: {
      //...
    }
  }
};