react-cosmos
React Cosmos ✭ Dev tool for creating reusable React components
Dev tool for creating reusable React components
Cosmos scans your project for components and enables you to:
- Render components under any combination of props, context and state
- Mock every external dependency (eg. API responses, localStorage, etc)
- See app state evolve in real-time while interacting with running instances
Working with Cosmos improves component design because it surfaces dependencies. Cosmos forces us to define sane component inputs, making our UIs predictable and easier to debug down the road.
Read the story of React Cosmos: Fighting for Component Independence
Why Cosmos?
Many other component explorers emerged in the past years. Storybook and React Styleguidist are good examples, but you can find an extensive list of options here. To decide which tool is best for you check for each project's goals, how much they match your needs, and how well the project is maintained.
Cosmos is a dev tool first, made to improve all components, big and small, not just the stateless UI bits. The fixture and proxy architecture doubles as an automated testing utility, providing a complete solution for developing robust and reusable components. Cosmos also makes it easy to create a living style guide, but it's a secondary goal and you might get more value from alternatives if this is your chief concern.
To find out more about the Cosmos project, check out Mission, Goals and Architecture.
Usage
Requirements:
- [x] React >=0.14.9
- [x] webpack or Browserify (or roll your own integration)
- [ ] Fixtures (you'll create them after getting started)
React Cosmos works best with webpack. Making it work with other bundlers takes extra work, but a complete Browserify example is available.
