react-storybook-story

2.2.0 • Public • Published

React Storybook Story

A component to add additional information with your react-storybook stories.

React Storybook Screenshot

To get started, install the module as a devDependency

npm install -D react-storybook-story

When writing stories, wrap your component with the <Story /> component and use the info parameter to give additional info.

import {storiesOf} from '@kadira/storybook';
import Story from 'react-storybook-story';
import 'react-storybook-story/styles.css';
 
storiesOf('<MyComponent />', module)
  .add('my-example-story', function () {
    const info = `
      This story will render **MyComponent** with the
      _foo_ parameter set to "bar"
    `;
    return (
      <Story info={info}>
        <MyComponent foo={'bar'} />
      </Story>
    );
  });

The FAQ

Error loading styles.css file

To load the stylesheet make sure your webpack config has style-loader and raw-loader setup properly. Modify your .storybook/webpack.config.js file to include the style-loader.

const path = require('path');
 
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css?$/,
        loaders: ['style', 'raw'],
        include: path.resolve(__dirname, '../'),
      },
    ],
  },
};

Credits

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.2.0
    1
    • latest

Version History

Package Sidebar

Install

npm i react-storybook-story

Weekly Downloads

1

Version

2.2.0

License

MIT

Last publish

Collaborators

  • mnmtanish