Category: Storybook for React

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.