skidding / React Component Playground
Licence: mit
Minimal frame for loading and testing React components in isolation.
Stars: ✭ 77
Programming Languages
javascript
184084 projects - #8 most used programming language
Deprecated
This package has been merged into the React Cosmos monorepo.
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: {
//...
}
}
};
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].