React Storybook: Why Should You Use It?

By Daniel Butterfield

I've recently moved onto a new project and it uses Storybook with React. We think it's amazing. In this post, I'll be sharing what it is, how to use it, and why we think it's awesome. You should definitely use it.

What is React Storybook?

Storybook is a development environment tool that is used as a playground for UI components. It allows us, the developers, to create and test components in isolation. It runs outside of the app, too, so project dependencies won't affect the behaviour of components.

If you want to simulate these dependencies affecting your code though, for example with a global font style, you can create containers that mimic these dependencies, and wrap those around your isolated components - great for testing!

Our Experience

Since we have started using Storybook we've noticed how useful it is to test components in an isolated state, without any other project clutter.

You can do literally anything in these stories to help best reflect the component’s typical state. The two most common uses I have for Storybook, personally, are using it as a general playground while developing and then showcasing the component in the form of a video which is submitted as part of pull requests.

However, React Storybook can be an amazing demonstration tool to use with clients during meetings or to pass to a QA team since components can be tested easily and effectively.

Setting up React Storybook

Here I’ll walk through installing and using Storybook after setting up a project with Create React App and TypeScript. There are three steps to set up everything required to use Storybook with React in TypeScript:

1. Install React with TypeScript. One of the easiest ways to do this is run the command `yarn create-react-app my-app --template typescript` or if you prefer `npx create-react-app my-app --template typescript`

2. Install Storybook. Storybook has plenty of installation options, the simplest being `npx -p @storybook/cli sb init` which should be smart enough to realise you are using React and, voila, you have Storybook.

3. Update Storybook to look for your specific naming convention. All that's needed now is to find the `./storybook/main.js` and update it to the following:

This means that Storybook will look within your src directory for any file ending with `.story.tsx` (which is what you would name your component stories).

You may also refer to Create React App and Storybook installation guides for more information.

How do I use it then?

Assuming that everything isn't on fire at this point, you should have a working project.

From here it's typically best practice to have a components directory. In this case I've created an ExampleButton directory, and within this we have some related files and we should have a component test in here too!

As for the button itself, we can make it quite simple. We can take a “color” as required props, and pass a style object to the returned “button” with some other basic properties so it looks acceptable. React provides plenty of information on the best approaches for styling your components, I would recommend Styled Components, though.

So now that we have our button which accepts a “color” as a prop, we can write our ExampleButton story! Due to our Storybook configuration mentioned earlier, we need to end our files with `.story.tsx`.

Here's the cool part - we can define multiple stories here, with the same component, and pass different props to it. These are then rendered in isolation allowing us to showcase them, play with them, and test them. It's great.

You should be able to run the command  `yarn storybook`  and see the following results:

Happy coding and good luck!