Storybook for React

Kimberly Bone
Feb 10, 2020 · 3 min read
Storybook logo

Storybook is a tool that enables developers to create components interactively and independently in a separate environment. It is a collection of stories where each story is a function and a visual test case.

Storybook can be used with a variety of frameworks such as Angular, Vue, Ember, React etc. but in this article I’ll be working with React.

Luckily, there are only a couple steps to get started with Storybook.

First, cd into your project then type in npx -p @storybook/cli sb init into your command line. This will add Storybook to your project and the nice thing about is that it detects whether you are using Vue, React, Angular etc automatically. If it’s not successful in detecting your project type, you can select the project type from a given list in the terminal.

Second, run storybook with npm run storybook and you will see this pop up in your browser.

Welcome page in Storybook browser

In the Storybook document, they give a great example of what they call a “Basic Story” for a Button component.

Storybook will automatically update in the browser as you are coding. Looking at the button example, the Button.js file will look something like this.

import React from 'react';
import { action } from '';
import Button from './Button';
export default {
component: Button,
title: 'Button',
};
export const text = () => <Button onClick={action('Hellooo!')}>Hello Button</Button>;export const emoji = () => (
<Button onClick={action('Cha-ching!')}>
<span role="img" aria-label="so cool">
💎💎💎
</span>
</Button>
);

In your browser, it will look something like this:

Storybook Button component

Now if I click on it three times, the action that I typed (‘Cha-ching!’) will show under “Actions” every time I click on it:

Storybook actions after being clicked

I can also add styling globally or locally called “decorators” onto the components. You must import the decorator component first.

import { addDecorator } from '@storybook/react'

To add styling globally, you will need to create a function as a part of the default object.

export default {
title: 'Button',
component: Button,
decorators: [storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]
};

To add styling locally, you will need to specify the story you want to apply the styling to.

Emoji.story = {
decorators: [storyFn => <div style={{ border: '5px solid red'}}>{storyFn()}</div>]
}

Your browser will then look something like this:

Storybook can help create more productive and smart applications. For all the front-end developers out there, it’s definitely worth looking into!

~Happy coding!~

Resources:

The Startup

Get smarter at building your thing. Join The Startup’s +792K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. 

By signing up, you will create a Medium account if you don’t already have one. Review our for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Kimberly Bone

Written by

SWE with a passion for innovative technologies. I blog about technology, coffee & NYC. Let’s connect! https://www.linkedin.com/in/kimberly-bone-aa3952121/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Kimberly Bone

Written by

SWE with a passion for innovative technologies. I blog about technology, coffee & NYC. Let’s connect! https://www.linkedin.com/in/kimberly-bone-aa3952121/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store