Storybook for React — Docs Page
Tags: react, webdev, programming, javascript
Published: 2021-01-24 21:42:10

**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 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 }
  }
};
```

Then we’ll see the ‘No Docs’ message on all stories.

### Global Level

We can set the `docs.page` property at the global level so we can replace the DocsPage in all stories.

For example, we can write:

`./storybook/preview.js`

```
export const parameters = {
  docs: { page: null }
}
```

Now all our stories will see the ‘No Docs’ message.

### Remixing DocsPage

Also, we can add our own content by importing props from the page.

For example, we can write:

```
import React from 'react';
import { Button } from './Button';
import {
  Title,
  Subtitle,
  Description,
  Primary as PrimaryDoc,
  Props,
  Stories,
  PRIMARY_STORY,
} from '@storybook/addon-docs/blocks';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <PrimaryDoc />
          <ArgsTable story={PRIMARY_STORY} />
          <Stories />
        </>
      ),
    },
  },
};

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',
};
```

to add the components to builds our documentation page.

We install the `@storybook/addon-docs` package so that we can add a custom documentation page.

`Title` and `Subtitle` have the title and subtitle.

`Description` has the description of the component.

`Primary` has the preview.

`ArgsTable` has the arguments list.

`Stories` has the stories list.

`PRIMARY_STORY` has the main story of the Storybook.

### Inline vs Iframe Stories

We can put stories inline or in an iframe.

To do that, we set `inlineStories` to `true` so that we can stop putting items in an iframe.

Also, we can write our own function and set it to the `prepareForInline` property to display docs inline.

For example, we can render Vue stories into React ones by writing:

```
import React from 'react';
import { render } from 'react-dom';
import toReact from '@egoist/vue-to-react';

export const parameters = {
  docs: {
    prepareForInline: (storyFn, { args }) => {
      const Story = toReact(storyFn());
      return <Story {...args} />;
    },
  },
}
```

We render the content returned by `storyFn` into a React component.

We need the `@egoist/vue-to-react` package to render the Vue content into a React component.

### Conclusion

There’re many ways to render stories with our own content.

We can use the components provided by the Storybook addons.