How to use @storybook/addon-events - 4 common examples
To help you get started, we’ve selected a few @storybook/addon-events examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
storybookjs / storybook / examples / rax-kitchen-sink / src / stories / addon-events.stories.js View on Github 
import { createElement } from 'rax';
import withEvents from '@storybook/addon-events';
import ee from 'event-emitter';
import Logger, { EVENTS } from '../components/Logger';
const emitter = ee();
const decorator = withEvents({
emit: emitter.emit.bind(emitter),
events: [
{
name: EVENTS.TEST_EVENT_1,
title: 'Test event 1',
payload: 'hi',
},
{
name: EVENTS.TEST_EVENT_2,
title: 'Test event 2',
payload: 'ho',
},
{
name: EVENTS.TEST_EVENT_3,
title: 'Test event 3',
payload: {string: 'value',
number: 123,
array: [1, 2, 3],
},
],
},
];
storiesOf('React|Events', module)
.addParameters({
framework: 'react',
options: {
selectedPanel: 'storybook/events/panel',
},
})
.addDecorator(withEvents({ emit, events }))
.add('Logger', () => );
const WithEvents = withEvents;
storiesOf('React|Events.deprecated', module)
.addParameters({
framework: 'react',
options: {
selectedPanel: 'storybook/events/panel',
},
})
.addDecorator(storyFn => (
{storyFn()}
))
.add('Logger', () => );import './addon-events.css';
const TEST_EVENTS = {
TEST_EVENT_1: 'test-event-1',
TEST_EVENT_2: 'test-event-2',
TEST_EVENT_3: 'test-event-3',
TEST_EVENT_4: 'test-event-4',
};
const emitter = new EventEmitter();
const emit = emitter.emit.bind(emitter);
storiesOf('Addons|Events', module)
.addDecorator(
withEvents({
emit,
events: [
{
name: TEST_EVENTS.TEST_EVENT_1,
title: 'Test event 1',
payload: 0,
},
{
name: TEST_EVENTS.TEST_EVENT_2,
title: 'Test event 2',
payload: 'Test event 2',
},
{
name: TEST_EVENTS.TEST_EVENT_3,
title: 'Test event 3',
payload: {{
string: 'value',
number: 123,
array: [1, 2, 3],
},
{
string: 'value',
number: 123,
array: [1, 2, 3],
},
],
},
];
storiesOf('Addons|Events', module)
.addDecorator(withEvents({ emit, events }))
.add('Logger', () => );
const WithEvents = withEvents;
storiesOf('Addons|Events.deprecated', module)
.addDecorator(story => (
{story()}
))
.add('Logger', () => );@storybook/addon-events
Add events to your Storybook stories.
