New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-auto-events
Auto events for your stories in storybook
npm install storybook-auto-events
Last updated over 1 year ago
449
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"/>`,
});
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI