Storybook for React — ArgsTable
Tags: react, webdev, programming, javascript
Published: 2021-01-24 21:43:36

**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 add ArgsTable with Storybook.

### Doc Blocks

Doc blocks are building blocks of Storybook documentation pages.

DocsPage uses a combination of doc block to form a document.

### ArgsTable

Storybook docs automatically generate a component args table for components.

The tables list the arguments of the component.

It can also integrate with controls to let us change the args of the currently rendered story.

This can expanded with our own code by adding comments to document it.

For example, in our `Button.js` file, we can write:

```
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,
  /**
    String for the background color
  */
  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,
};
```

to create our `Button` component.

We have a comment above the `backgroundColor` prop.

This will be displayed in the Description column of the args table.

### DocsPage

To add a DocsPage for a component, we just have to export an object with the `components` property for the file.

For example, 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.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 have the:

```
export default {
  title: 'Example/Button',
  component: Button
};
```

default export to export an object with the `component` property to make the button display the `Button` component.

### Customizing ArgsTable

We can customize our ArgsTable by writing:

`src/stories/Button.stories.js`

```
import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    primary: {
      description: 'overwritten description',
      table: {
        type: {
          summary: 'summary',
          detail: 'some detail'
        },
      },
      control: {
        type: null,
      },
    },
  },
};

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 have the `argsTypes` property with an object that has properties for the `primary` argument.

The `description` property has the description.

`table` has an object that will be populated in the description.

`summary` is displayed as button that can be toggled to display the `detail` .

`control` has the control for setting the args.

We can change the source snippet that’s displayed for a story.

To do that, we can set the `docs.source.code` property:

```
import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    primary: {
      description: 'overwritten description',
      table: {
        type: {
          summary: 'summary',
          detail: 'some detail'
        },
      },
      control: {
        type: null,
      },
    },
  },
};

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

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

Primary.parameters = {
  docs: {
    source: {
      code: 'Some custom string here'
    }
  },
};

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

The `‘Some custom string here’` string will be displayed when we click the Show code button.

### Conclusion

We can add code to show different things in the ArgsTable to document the arguments that the component accepts in Storybook.