Storybook for React — Docs Page

Photo by KAL VISUALS on Unsplash

Storybook lets us prototype components easily with various parameters.

In this article, we’ll look at how to replace the DocsPage template with Storybook.

Replacing DocsPage

We can replace the DocsPage template with our own content.

In the story level, we can write:

src/stories/Button.stories.js

import React from 'react';
import { Button } from './Button';
export default {
  title: 'Example/Button',
  component: Button,
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.parameters = { docs: { page: null } }

We set the docs.page property to null and then we’ll see the ‘No Docs’ page displayed.

Also, we can set the docs.page property at the component level.

To do this, we write:

src/stories/Button.stories.js

import React from 'react';
import { Button } from './Button';
export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: { page: null }
  }
};