/react-story

A component for quickly and easily showcasing React components

Primary LanguageJavaScriptMIT LicenseMIT

React Story

react-story is a component for quickly and easily showcasing React components

Features

  • A single, simple component
  • Built-in optional routing
  • Hyper-responsive, perfect for embedding in an existing UI

Table of Contents

Installation

  1. Install React Story as a dependency
$ yarn add react-story
  1. Import the react-story module
// ES6
import ReactStory from 'react-story'
// ES5
var ReactStory = require('react-story').default
CDN
  <!-- JS -->
  <script src="https://unpkg.com/react-story@latest/react-story.js"></script>

  <script>
    var ReactStory = window.ReactStory.default
  </script>

Example

import ReactStory from 'react-story'

render () {
  return (
    <ReactStory
      stories={[{
        name: 'Story 1',
        component: () => (
          <span>
            This is a React Story!
          </span>
        )
      }, {
        name: 'Story 2',
        component: () => (
          <span>
            Hey look! Another story.
          </span>
        )
      }, {
        name: 'Story 3',
        component: () => (
          <span>
            You get the idea :)
          </span>
        )
      }]}
    />
  )
}

Contributing

To suggest a feature, create an issue if it does not already exist. If you would like to help develop a suggested feature follow these steps:

  • Fork this repo
  • Install dependencies with $ yarn
  • Auto-build files as you edit with $ yarn run watch
  • Implement your changes to files in the src/ directory
  • Run the React Story locally with $ yarn run docs
  • View changes as you edit docs/src,
  • Submit PR for review

Scripts

  • $ yarn run watch Watches files and builds via babel
  • $ yarn run docs Runs the storybook server
  • $ yarn run test Runs the test suite

Used By

Nozzle Logo