Dev tool for creating reusable React components
React Cosmos ✭ Dev tool for creating reusable React components
Cosmos 4.7—the version that shows you the future (Cosmos Next is available for beta testers) ????
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
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. Check how much each tool matches your needs to decide which is best for you.
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.
- React >=0.14.9
- webpack or Browserify (or roll your own integration)
- Fixtures (you’ll create them after getting started)