@nlabs/storybook-addon-actions
v3.4.3
Published
Action Logger addon for storybook
Downloads
2
Readme
Storybook Addon Actions
Storybook Addon Actions can be used to display data received by event handlers in Storybook.
This addon works with Storybook for:
Getting Started
Install:
npm i -D @nlabs/storybook-addon-actions
Then, add following content to .storybook/addons.js
import '@nlabs/storybook-addon-actions/register';
Import the action
function and use it to create actions handlers. When creating action handlers, provide a name to make it easier to identify.
Note: Make sure NOT to use reserved words as function names. issues#29
import { storiesOf } from '@nlabs/storybook-react';
import { action } from '@nlabs/storybook-addon-actions';
import Button from './button';
storiesOf('Button', module)
.add('default view', () => (
<Button onClick={ action('button-click') }>
Hello World!
</Button>
))
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.
import { decorateAction } from '@nlabs/storybook-addon-actions';
import Button from './button';
const firstArgAction = decorateAction([
args => args.slice(0, 1)
]);
storiesOf('Button', module)
.add('default view', () => (
<Button onClick={ firstArgAction('button-click') }>
Hello World!
</Button>
))