It's long to navigate to the location of my component in my app after making a change

What if my visual change break other components?

I wasn't aware that this component was even existing

How can I enable people to quickly contribute to my component?

I'd like to have a visual documentation of my component


A Development and Testing environment that displays your components

Installation (React.js)

npm i -g @storybook/cli
cd my-react-app

Installation (React.js)

  • Add @storybook dependency to your package.json
  • Create .storybook with config files (~4 lines)
  • Create a stories folder with index.js (the entry point) and an example story.

This will:

Installation (React Native)

npm i -g @storybook/cli
cd my-react-native-app

Installation (React Native)

  • Add @storybook  dependency to your package.json
  • Create storybook with config files (~4 lines)
  • Create storybook/stories folder with index.js (the entry point) and an example story.

This will:

I got warnings and had to manually add react-dom to package.json


Write stories

import React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('SearchBar', module)
  .add('default', () => (
      hint="Enter your search keyword"
storiesOf('SearchBar', module)
  .add('default', () => ...)
  .add('display an error', () => (
    <SearchBar error="No internet connection"/>

Log actions

import { action } from '@storybook/addon-actions';

storiesOf('SearchBar', module)
  .add('default', () => (
      onSearch={action('search launched')}


// Decorator to allow material-ui components
// to read the app theme
const muiDecorator = (story) => (
  <MuiThemeProvider muiTheme={defaultTheme}>

// Add you decorator to any story using material-ui
storiesOf('AboutDialog', module)
  .add('default', () => <AboutDialog open />);

Or just components

// You can create a helper component and reuse it:
const Serializer = props => (
  <div>{props.children} {JSON.stringify(props.object)}</div>

storiesOf('ProfilePage', module).add('default', () => (
  <Serializer object={profile}>
    <ProfilePage profile={profile} />

storiesOf('CartItemsList', module).add('default', () => (
  <Serializer object={items}>
    <CartItemsList items={items} />

Fixtures/mocking data

// Create fixtures, or better, share them with your unit tests :)
import complexFakeData from './fixtures/my-complex-data.json';

storiesOf('Dashboard', module)
  .add('default', () => <Dashboard data={complexFakeData} />);


to use it?

Visual test cases

Living styleguide to improve consistency

Allow your product owner to validate design

Advantages over a home-made solution

  • 10min installation from zero to a component exposed
  • Ecosystem of addons


Edit props dynamically


Snapshot testing of your stories for free




Introduction to react-storybook

By Florian Rival

Introduction to react-storybook

Internal training at BAM and Renault Digital about react-storybook. Based on examples like

  • 736
Loading comments...

More from Florian Rival