2.9 KiB
| title |
|---|
| Actions |
The actions addon is used to display data received by event handler (callback) arguments in your stories.
Action args
Actions work via supplying special Storybook-generated “action” arguments (referred to as "args" for short) to your stories. There are two ways to get an action arg:
Action argType annotation
You can use argTypes to tell Storybook that an arg to your story should be an action. Usually it makes sense to do this at the component level (although it can be done per story):
<CodeSnippets paths={[ 'common/button-story-onclick-action-argtype.js.mdx', 'common/button-story-onclick-action-argtype.mdx.mdx', ]} />
When Storybook sees this argType it will create an arg that is set to a special “action” callback. If your component calls this arg (based on user interaction) the event will show up in the action panel:
Automatically matching args
Another option is to use a parameter to match all argTypes that match a certain pattern. The following configuration automatically creates actions for each on argType (which you can either specify manually or can be inferred automatically).
<CodeSnippets paths={[ 'common/button-story-matching-argtypes.js.mdx', 'common/button-story-matching-argtypes.mdx.mdx', ]} />
NOTE: If you're generating argTypes in using another addon (like docs, which is the common behavior) you'll need to make sure that the actions addon loads AFTER the other addon. You can do this by listing it later in the addons registration code in .storybook/main.js. This is default in essentials.
Action event handlers
It is also possible to detect if your component is emitting the correct HTML events using the parameters.actions.handles parameter.
<CodeSnippets paths={[ 'common/button-story-action-event-handle.js.mdx', 'common/button-story-action-event-handle.mdx.mdx', ]} />
This will bind a standard HTML event handler to the outermost HTML element rendered by your component and trigger an action when the event is called for a given selector. The format is <eventname> <selector>. Selector is optional; it defaults to all elements.
Advanced / legacy usage
There are also some older ways to use actions as documented in the advanced README.