uberVU/react-cosmos

DX tool for designing truly encapsulated React components.

React Cosmos

DX* tool for designing truly encapsulated React components.

Cosmos scans your project for React components and loads them inside the Component Playground, enabling you to:

1. Render your components under any combination of props and state
2. See component states evolve in real-time as you interact with running instances

Working with Cosmos 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.

*DX stands for Developer Experience, the counterpart of UX in building a product, system or service.

Requirements

• You should already be using CommonJS modules to structure your code and webpack to bundle your modules for the browser.
• You need to create fixtures for each set of props and states you want to load your components with. You can do this after you get started.

Usage

See Flatris for a complete example. In the meantime you can toy with the dev setup from this repo to get started. Better docs coming soon.

Development

Prerequisites:

npm install
npm install -g lerna@^2.0.0beta
npm run bootstrap

Start playground instance, built from source:

npm start

Work on a specific module (with playground re-bundling on file change):

npm run build:component-tree -- -- -w
npm start

Build everything with an older React version: 👌

npm run install-react:0.13
npm start

Run tests from all packages:

npm test

Thank you for your interest!

Explore the Contributing Guide for more information.

Thanks to Kreativa Studio for the Cosmos logo.