Getting Started with Storybook for React

What is Storybook? Storybook is a tool to develop components independent of your app. This approach is well-suited for developing React components. Storybook uses its own web server (separate from your React app) to setup a user interface that displays an individual component under different scenarios/stories. See screenshot at the bottom.

Why should you use Storybook?

1. If you are working on a large-scale application with a team, you can isolate your component so that external factors don’t interfere with the component development. As such, this approach allows your components to be more pure and reusable.
2. You can showcase your components individually to stakeholders for feedback.
3. You can examine the effects of prop changes to your component.

Example: Let’s take a look at an example. Our stakeholder wants to see how the button looks in different background colors. So, we are going to examine how a <Button /> component looks in different stories/scenarios. We are going to pass a “color” prop into the component to set the background-color.

Dependencies: We install our storybook dependencies. Storybook will automatically detect you are using the React framework so it will install the appropriate packages. Storybook will create scripts and add them to your package.json file so you can run Storybook.

npx -p @storybook/cli sb init

Storybook will create a “storybook” directory in your app folder containing a file called “main.js.” You will not need to configure anything in the main.js file to get started. Storybook will also create a “stories” folder with some sample stories. You can delete this folder if you want.

Create your component: Let’s create a simple <Button /> component. This component displays a button with a dynamic className set by the “color” prop. The text of the button is also dynamically set by the “name” prop.

import React from 'react';
import './button.css';
export default function Button(props) {
  const { color, name, ...rest} = props;
  return (
    <button className={`button ${color}`} {...rest}>
      {name}
    </button>
  );
}

Create a CSS file to style this component: We create a .red, .green, and .yellow class which we can use to set the background-color of the button.

.button {
  color: white;
  padding: 15px 32px;
  font-size: 30px;
  border-radius: 4px;
  cursor: pointer;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}

Story Time: Our stakeholder wants to see how the button will look like in red, green, and yellow. So, we will write stories to display our component with each of the desired colors. To do so, we create a file called Button.stories.js. Storybook will run stories on files with the .stories.js extension.

In our Button.stories.js file, we import our <Button /> component. We set the title of our story to “myButton” and set our component to “Button” in an object (the object is exported). Then, we create (and export) a function that returns the <Button /> component with the desired props.

import React from 'react';
import Button from './Button';
export default {
  title: 'myButton',
  component: Button,
};
export const Red = () => <Button color='red' name='Stop' />;
export const Green = () => <Button color='green' name='Go' />;
export const Yellow = () => <Button color='yellow' name='Caution' />;

Now, we launch Storybook using its script.

npm run storybook

Output: Storybook launches its own UI displaying your component in each scenario/story. The first story shows what you component looks like when we pass in “red” for the “color” prop and “Stop” for the “name” prop. We run the same tests for green and yellow. Now you can pick which story looks best.