How to Set Up Storybook in React

One of the advantages of using React is you can create UI components, reuse them all over your application and ultimately avoid code churn. Still, it is difficult to create completely independent UI components with React alone. You’ll need to create views that display these components to see them.

This is where Storybook comes in. It allows you to create and test UI components in an independent runtime environment and in this tutorial you will learn how to use it in React. By the end of this post, you will have created a button component and documented some of its possible states in React.

What Is Storybook?

Storybook is a development tool that lets you run and test your UI components without a complete React environment. This makes component-driven development easier because you can develop the components in isolation.

With Storybook, once you create a component, you can create multiple stories that define the various states of the component. For a button component, these states can include the primary state, secondary state, disabled state, and so on.

Since Storybook allows you to include code when creating the stories, it can also serve as a documentation tool.

To use Storybook, you’ll need to have Node installed on your machine and have a basic understanding of React.

Creating a React Application

To start using Storybook, you will first create a React project and then create components and their stories.

Run the following command to create a React application:

npx create-react-app btn-storybook

This will generate a folder called btn-storybook with all the dependencies a React application needs.

Next, with just a few more steps, you can install and run Storybook.

Installing Storybook

Navigate to the btn-storybook folder and install storybook:

cd btn-storybook
npx storybook init

Since you used create-react-app, this is the only command you need to run to set up Storybook. Storybook will install all the needed dependencies and perform all the necessary configuration. It will also create some boilerplate stories to get you started.

Once the above command has finished running, start storybook using the following code.

npm run storybook

This will open the storybook dashboard in your browser. It should look something like this:

Creating the Button Component

In the ./src folder, create a folder called Components, and in it create another folder called Button. The Button folder should be in this path: ./src/Components/Button.

Now, in this folder, create Button and add the following code:

import PropTypes from "prop-types"
function Button({ label, backgroundColor = "#6B4EFF", color = "white", borderRadius="48px", border="none"}) {
const style = {
backgroundColor,
padding: "0.5rem 1rem",
color,
borderRadius,
border
}
return (
<button style={style}>
{label}
</button>
)
}
Button.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
color: PropTypes.string,
border:PropTypes.string,
borderRadius: PropTypes.string,
}
export default Button;

This component accepts some React props that include the button label and its styles. You are also using propTypes to check the types of the props passed in and raise a warning if you use the wrong type. The component returns a button element.

Creating the Button Stories

When you installed Storybook in the React project, it generated a folder containing some story examples, named stories. Navigate to that folder and delete everything in it. You will be creating the stories from scratch.

You’ll be creating two stories representing the primary button and the secondary button. Each of these buttons has a different style that separates it from the rest. You will be able to see each of them in the Storybook dashboard once you create the stories.

In the stories folder, create a new file called button.stories.js. It is important to include .stories before .js as that’s what tells Storybook which is a stories file.

Import the Button component.

import Button from "../Components/Button/Button"

Next export the title of the component and the component itself. Note that the title is optional.

export default {
title: "Components/Button",
component: Button,
}

The first story you will create is for the Primary button. So, create a new function called Primary and export it.

export const Primary = () => <Button backgroundColor="#6B4EFF" label="Primary"/>

Now if you go to the Storybook dashboard, you will be able to see the rendered button.

To edit the rendered component live and change its state on the Storybook dashboard you will use args. Args allow you to pass arguments to Storybook which when changed causes the component to re-render.

To define the args of the button story, create a function template.

const Template = args => <Button {...args}/>

This template accepts args and passes them as props to the Button component.

You can now rewrite the Primary story using the template as shown below.

export const Primary = Template.bind({})
Primary.args = {
backgroundColor: "#6B4EFF",
label: "Primary",
}

If you check the Storybook dashboard, you should see controls at the bottom. These controls allow you to change how the button displays. You can change the background color, text color, label, border, and border-radius.

You only need to change the args values to create the other stories. For instance to create a Secondary button, use the following code.

export const Secondary = Template.bind({})
Secondary.args = {
backgroundColor: "#E7E7FF",
color: "#6B4EFF",
label: "Secondary",
}

On the Storybook dashboard navigate to different stories by clicking on them in the sidebar. You will see how each renders. You can continue adding more states to the button stories as you want. Try adding an outline or an outline story.

Testing UI Components

This tutorial gave you a brief introduction to using Storybook with React UI components. You learned how to add Storybook to a React project and how to create a basic story for a Button component with args.

You may have noticed that during this process, you were testing how the button component rendered in different states. You may be writing more code but, once you have written the component stories, you’ll minimize any errors that might arise when reusing components across your application. Furthermore, it will be easier to track down the error if it occurs. That’s the beauty of component-driven development.