Storybook Addon Actions

The Action Logger addon can be used to display data received by event handlers. This addon works with both React Storybook and React Native Storybook (included by default).

Getting Started

You can use this addon without installing it manually.

Import the action function and use it to create actions handlers. When creating action handlers, provide a name to make it easier to identify.

1import { storiesOf, action } from '@kadira/storybook'
2// or import { action } from '@kadira/storybook-addon-actions'
3
4storiesOf('Button', module)
5  .add('default view', () => (
6    <Button onClick={ action('button-click') }>
7      Hello World!
8    </Button>
9  ))

Action Decorators

If you wish to process action data before sending them over to the logger, you can do it with action decorators.

decorateAction takes an array of decorator functions. Each decorator function is passed an array of arguments, and should return a new arguments array to use. decorateAction returns a function that can be used like action but will log the modified arguments instead of the original arguments.

1import { action, decorateAction } from '@kadira/storybook-addon-actions'
2
3const firstArgAction = decorateAction([
4  args => args.slice(0, 1)
5]);
6
7storiesOf('Button', module)
8  .add('default view', () => (
9    <Button onClick={ firstArgAction('button-click') }>
10      Hello World!
11    </Button>
12  ))