React-Cosmos

Dev tool for creating reusable React components

Cosmos

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:

  1. Render components under any combination of props, context and state
  2. Mock every external dependency (eg. API responses, localStorage, etc)
  3. See app state evolve in real-time while interacting with running instances

Component Playground

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. 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.

Usage

Requirements:

  •  React >=0.14.9
  •  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 both a Browserify exampleand a Parcel example are available.

 

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.