storybook-auto-events
Auto events for your stories in storybook
npm install storybook-auto-events
351
Downloads per week
Readme View on GitHub
storybook-auto-events
Annoyed to always add all events to your story so that they appear in the Actions
panel?
This is where storybook-auto-events
comes in handy. It will automatically detect all events
thrown in your component and create an event listener for exactly that event.
Install
npm i storybook-auto-events
Setup
in your .storybook/preview.js
add a new decorator
// File: .storybook/preview.js
import withEvents from 'storybook-auto-events';
export const decorators = [
withEvents,
storybookAxiosDecorator(getAxios()),
];
Usage
Add a new parameter in your story named events
. Events
is an object which holds a list of handlers with the corresponding
event name as the key.
Add those events to the story context via data
or a computed
property and finally bind all events to your component
via v-on="events"
//select-input.stories.js
export const IncludeExclude = (args, { argTypes, events }) => ({
components: { SelectInput },
props: Object.keys(argTypes),
data: () => ({
events,
}),
template: `
<select-input v-bind="$props" v-on="events"/>`,
});