In most React applications, there are many components working closely together to share and pass data between them. This can sometimes make it difficult to test components individually. Maybe you want to see how a component will react when given invalid data, or you want to test your component visually in different states. Storybook with React gives you a great way to do this in isolation, without worrying about the app-specific dependencies or requirements.

Storybook is an open-source tool for developing user interface components in isolation. In other words, it’s a playground for UI components. In this blog, we will dive into the basics of Storybook, write a Storybook for Material UI’s button component, and look at a couple of its add-ons.

Getting Started

To get started, we will use Create React App to set up a basic React project to create our Storybook on.

npx create-react-app storybook-demo</code>

Next, we’ll install Storybook into our project.

cd storybook-demo
npx -p @storybook/cli sb init
This command will inspect our <code>package.json</code> and install the React-related dependencies that Storybook will need.Once it is finished, we can run Storybook with yarn.
yarn storybook

This should open Storybook at localhost:9009. On the left, there are a couple of predefined example stories written for a button component.

Stories are the building blocks of Storybook. They represent a component in various different states apart from its default (like being disabled). By writing stories that target a component’s edge cases, we can test to see the component’s behavior in different situations.

Writing Our First Story

Before we begin writing our first story, let’s first add @material-ui/core to our project. Material UI is a popular React framework containing many different components.

In a new command line window, run these two commands:

yarn add @material-ui/core

yarn add @material-ui/icons

Now that we have Material UI installed, let’s write a story for its Button component. First, create a new file under the stories folder named 2-MyStory.stories.js, then paste the following code:

	import React from 'react';
	import { storiesOf } from '@storybook/react';
	import { Button } from '@material-ui/core'; 

	storiesOf('MUI Button', module)
  		.add('default', () => <Button>Default</Button>)
  		.add('secondary', () => <Button color="secondary">Secondary</Button>)
  		.add('disabled', () => <Button disabled>Disabled</Button>)
 		.add('contained', () => <Button variant="contained">Contained</Button>)
 		.add('outlined', () => <Button variant="outlined">Outlined</Button>)
 		.add('empty', () => <Button />);

In this snippet, we define a few different states for our button. The storiesOf() function will register the component and display it in the Storybook window using the first parameter as the name. The add() function allows us to define each story we want to see.

In this case, we should now see ‘MUI Button’ in our Storybook window, along with each of the new stories underneath. By clicking on the stories, you should be able to see the different states of the button.

Actions

Add-ons implement extra features for Storybooks to make them more useful. The Action add on, available through@storybook/add-on-actions, will capture data through event handlers.

In order to use this add-on, make sure you see it registered in main.js in the .storybook folder.

@storybook/addon-actions

Now, we can define an action in our stories. Make sure to import actions into your file.

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

Then define an action, ‘default,’ on the first story.

	.add('default', () => <Button onClick={action('default clicked')}>Default</Button>)

Knobs

The Knobs add-on allows us to dynamically interact with the component’s input through the Storybook user interface. You may need to install this add-on, as it is not included by default. Again, make sure to add it to the main.js in the .storybook folder.

yarn add @storybook/addon-knobs

@storybook/addon-actions

We can modify a single story to use knobs, as shown below:

	import { text } from '@storybook/addon-knobs';

	.add('secondary', () => 
<Button color=“secondary”>{text('text', 'Some text here')}</Button>)

Now, if we navigate back to the Storybook UI, we see that the input for our button’s secondary story is now configurable in the bottom of the UI under the knobs tab.

Conclusion

In this post, we explored some of the basics of Storybook with React and how it can isolate components, allowing them to be easily tested in different scenarios. Through the use of add-ons, we can make these tests even more useful.

This post only scratches the surface of the many uses of Storybook. When used effectively, you can utilize Storybook to easily prototype your components during development and more easily communicate with your team.

You can read more about it on Storybook’s page, here.