Storybook for React — Controls and argTypes
Tags: webdev, programming, javascript, react
Published: 2021-01-24 21:45: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 work with addons for Storybook.

### Controls

Storybook controls let us interact with the component’s arguments dynamically without changing the code.

They are convenient and portable.

For example, we can set a control for an arg with the `argTypes` property:

`src/stores/Button.stories.js`

```
import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};
```

We set the `backgroundColor` to be set with a color picker with the `control` property set to `'color'` .

Also, we can set a range slider with the `type` set to `'range'` .

For example, we can write:

`Button.js`

```
import React from 'react';
import PropTypes from 'prop-types';
import './button.css';

export const Button = ({ primary, backgroundColor, borderRadius, size, label, ...props }) => {
  const mode = primary ? 'button-primary' : 'button-secondary';
  return (
    <button
      type="button"
      style={{ backgroundColor, borderRadius }}
      {...props}
    >
      {label}
    </button>
  );
};

Button.propTypes = {
  primary: PropTypes.bool,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  borderRadius: PropTypes.number,
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  borderRadius: 10,
  onClick: undefined,
};
```

`Button.stories.js` 

```
import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    borderRadius: {
      control: { type: 'range', min: 0, max: 50, step: 1 },
    },
  },
};
```

We set the `borderRadius` prop to be changed with a range slide with the `type` set to `'range'` .

### Hide NoControls Warning

If we don’t plan to add any controls in our story, we can hide it with the `hideNoControlWarning` set to `true` .

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

Primary.parameters = {
  controls: { hideNoControlsWarning: true },
}
```

to hide the controls warning.

### Actions

The actions addon lets us display data received by the event handler arguments for our stories.

We can set the argType to tell Storybook that an arg should be an action.

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,
  argTypes: { onClick: { action: 'clicked' } },
};
```

We set the `argTypes.onClick` property to set the `action` to `'clicked'` .

Then that’ll be displayed when we click the button.

### Automatically Matching Args

We can also automatically match argTypes with a certain pattern.

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,
  parameters: { actions: { argTypesRegex: '^on.*' } },
};
```

We set the `argTypesRegex` property to match the event with the prop name.

Therefore, the `click` action will be matched with the `onClick` handler, so when we click the button, `onClick` will be run.

### Conclusion

We can set the controls and the argType for event handlers with Storybook.