Skip to content

uberVU/react-component-playground

 
 

Repository files navigation

React Component Playground

Build Status Coverage Status

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:

  • react-component-playground@0.3 with react@0.13 and below
  • react-component-playground@0.4 with react@0.14 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: {
      //...
    }
  }
};

About

Minimal frame for loading and testing React components in isolation.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 83.0%
  • CSS 17.0%