Getting Started with Storybook for React
Tags: react, webdev, programming, javascript
Published: 2021-01-24 21:39:13

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Storybook lets us prototype components easily with various parameters.

In this article, we’ll look at how to get started with Storybook.

### Getting Started

We can get started by first creating a React project with Create React App.

To create it, we run:

```
npx create-react-app storybook-project
```

Then we can add Storybook to it by running:

```
npx sb init
```

Then we can run it by running:

```
npm run storybook
```

to run Storybook.

Now we can create a story.

A story has the component which may take some arguments to let us adjust it.

We can provide default values for these arguments.

First, we create a component that takes some props.

In the `src/stories` folder, we create a `Button.js` to create a button that takes some props:

```
import React from 'react';
import PropTypes from 'prop-types';
import './button.css';

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'button-primary' : 'button-secondary';
  return (
    <button
      type="button"
      className={['button', `button-${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Button.propTypes = {
  primary: PropTypes.bool,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  onClick: undefined,
};
```

Then we add a `button.css` to style it:

```
.button {
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}
.button-primary {
  color: white;
  background-color: #1ea7fd;
}
.button-secondary {
  color: #333;
  background-color: transparent;
}
.button-small {
  font-size: 12px;
  padding: 10px;
}
.button-medium {
  font-size: 14px;
  padding: 11px;
}
.button-large {
  font-size: 16px;
  padding: 12px;
}
```

Our button takes a bunch of props to let us modify the button with different styles.

`primary` is a boolean prop.

`backgroundColor` is a string prop.

`size` lets us change the size with an enum type.

`label` lets us show a label.

`onClick` is a function to let us handle clicks.

To make it display in Storybook, we add the `Button.stories.js` file and add:

```
import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};
```

We export an object with the things we want to display.

`title` has the title we want to display in Storybook.

`component` is the component we want to preview.

`argTypes` lets us set the control types for various props so we can change and preview them in Storybook.

Below that is the args. The args lets us pass in props to our component so that we can change it.

We provide some default values with the `Template.bind` method and setting the `args` property to the values we want.

### Conclusion

We can create components and preview them with Storybook.

They can be changed if they accept props and bind to them with args.