mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 13:11:20 +08:00
105 lines
3.6 KiB
Markdown
105 lines
3.6 KiB
Markdown
# Storybook Addon Actions
|
|
|
|
[](https://circleci.com/gh/storybooks/storybook)
|
|
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
|
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
|
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
|
[](https://now-examples-slackin-rrirkqohko.now.sh/)
|
|
[](#backers) [](#sponsors)
|
|
|
|
* * *
|
|
|
|
Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).
|
|
|
|
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
|
|
|
|
|
|
|
## Getting Started
|
|
|
|
Install:
|
|
|
|
```sh
|
|
npm i -D @storybook/addon-actions
|
|
```
|
|
|
|
Then, add following content to `.storybook/addons.js`
|
|
|
|
```js
|
|
import '@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](https://github.com/storybooks/storybook-addon-actions/issues/29#issuecomment-288274794)_
|
|
|
|
```js
|
|
import { storiesOf } from '@storybook/react';
|
|
import { action, configureActions } from '@storybook/addon-actions';
|
|
|
|
import Button from './button';
|
|
|
|
action('button-click')
|
|
|
|
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.
|
|
|
|
```js
|
|
import { decorateAction } from '@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>
|
|
))
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Arguments which are passed to the action call will have to be serialized while be "transfered"
|
|
over the channel.
|
|
|
|
This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible
|
|
to configure a maximum depth.
|
|
|
|
To apply the configuration globally use the `configureActions` function in your `config.js` file.
|
|
|
|
```js
|
|
import { configureActions } from '@storybook/addon-actions';
|
|
|
|
configureActions({
|
|
depth: 100
|
|
})
|
|
```
|
|
|
|
To apply the configuration per action use:
|
|
```js
|
|
action('my-action', {
|
|
depth: 5
|
|
})
|
|
```
|
|
|
|
### Available Options
|
|
|
|
|Name|Type|Description|Default|
|
|
|---|---|---|---|
|
|
|`depth`|Number|Configures the transfered depth of any logged objects.|`10`|
|