@kevinmershon/reactcards
devcards for react
Last updated a month ago by kevinmershon .
BSD-3-Clause · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @kevinmershon/reactcards 
SYNC missed versions from official npm registry.

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 @kevinmershon/reactcards

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

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


if (module.hot) {
    module.hot.accept()
}

// off we go...
run();

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

Example

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')

demo.card(
  `## 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'})

card

Creating a Static Version of Your React Cards

Coming soon.

Documentation

Examples

License

Copyright © 2016 Ali Sharif, Stefan Oestreicher and contributors.

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

Current Tags

  • 0.5.0-alpha4                                ...           latest (a month ago)

4 Versions

  • 0.5.0-alpha4                                ...           a month ago
  • 0.5.0-alpha3                                ...           2 months ago
  • 0.5.0-alpha2                                ...           3 months ago
  • 0.5.0-alpha1                                ...           4 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 4
Last Month 4
Dependencies (37)
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |