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 write and browse stories with Storybook.

Browse Stories

We can browse stories by running:

npm run storybook

Then we’ll see the storybook at the URL that’s displayed.

The sidebar has the components.

And we have the preset props that are set with args on the left side.

We can zoom in visually and change the props with that.

The background can be changed so that we can see what the component looks like with different backgrounds.

We can also change the viewport side so we can see how it renders with them.

The docs tab shows the documentation about the components.

They are inferred from the source code.

Toolbars are customizable. We can use globals to toggle themes and languages.

Also, we can add addons to extend Storybook’s functionality.

They are located at the bottom of the preview pane.

The Controls addon lets us interact with the component.

Actions let us set the callbacks and simulate the result that we get with them.

Write Stories

We can write stories by adding some code with Storybook.

We put our story code files in the src/stories folder.

The story files end with the stories.js or stories.ts file.

We can set the story name with the storyName property.

For example, we can write:

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',
};
Primary.storyName='primary button';

to create a basic story.

We set the story name by assigning a string to the storyName property.

Also, instead of using args, we can set our own props with a story.

For example, we can write:

export const Primary = () => <Button primary label="Button" />;
Primary.storyName='primary button';

to add the Primary story.

Also, we can set various parameters that we can test our component with the parameters property.

For example, we can write:

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  parameters: {
    backgrounds: {
      values: [
        { name: 'red', value: '#f00', },
        { name: 'green', value: '#0f0', },
        { name: 'blue', value: '#00f', },
      ]
    }
  }
};

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 added the backgrounds property which should be displayed at the top menu.

This way, we can set different background colors and see what our component looks like with it.

Conclusion

We can add components with their stories and test them with Storybook.