devcards for react
Clone or download
steos Merge pull request #35 from ChrisMLee/master
Change react and react-dom to externals in webpack and peer dependencies in package.json
Latest commit e894858 May 29, 2017

React Cards

Build Status

React Cards is inspired by Bruce Hauman's excellent devcards project which aims to provide ClojureScript developers with a visual REPL-like experience especially suited for UI development.

Getting Started

npm install reactcards

Add an entry file (f.e. entry.js)

import {run} from 'reactcards';
import './someCard';

if ( {

// off we go...

Add reactcards to your package.json

"scripts": {
   // ...
    "reactcards": "reactcards -p 8080 -e ./entry.js",
   // ...

Available options for reactcards

-p, --port <number> Port to run React Card
-e, --entry <file> Entry point for React Cards
-c, --conf <file> Custom Webpack config file

Now you can simply run

npm run reactcards

React Cards will be available at http://localhost:8080

Also see the create-react-app example project


For quickly testing React Cards run the following command

npm run example

The example includes 2 namespaces and features a number of markdown, tests and component cards. With react cards you can run the tests you have written for a card independent of react cards, run the following command.

npm run example:test

Writing Cards

Quick example. For a more detailed guide read the Writing Cards section.

import React from 'react'
import cards from 'reactcards'
import {Foo, Bar} from './components'

const demo = cards('demo')

  `## markdown doc
  you can use markdown for card documentation
  - foo
  - bar`,
  <Foo message="hello"/>

demo.card(<Foo message="hello world"/>)

demo.card(<Bar/>, {title: 'a bar card'})


Creating a Static Version of Your React Cards

Coming soon.




Copyright © 2016 Ali Sharif, Stefan Oestreicher and contributors.

Distributed under the terms of the BSD-3-Clause license.