@nlabs/storybook-addon-events
v3.4.3
Published
Add events to your Storybook stories.
Downloads
3
Readme
Storybook Addon Events
This storybook (source) addon allows you to add events for your stories.
Storybook Addon Events Live Demo
Getting Started
npm i --save-dev @nlabs/storybook-addon-events
Then create a file called addons.js
in your storybook config.
Add following content to it:
import '@nlabs/storybook-addon-actions';
import '@nlabs/storybook-addon-links';
import '@nlabs/storybook-addon-events/register';
Then write your stories like this:
import { storiesOf } from '@nlabs/storybook-react';
import WithEvents from '@nlabs/storybook-addon-events';
import EventEmiter from 'event-emiter';
import Logger from './Logger';
import * as EVENTS from './events';
const emiter = new EventEmiter();
const emit = emiter.emit.bind(emiter);
storiesOf('WithEvents', module)
.addDecorator(getStory => (
<WithEvents
emit={emit}
events={[
{
name: EVENTS.TEST_EVENT_1,
title: 'Test event 1',
payload: 0,
},
{
name: EVENTS.TEST_EVENT_2,
title: 'Test event 2',
payload: 'asdasdad asdasdasd',
},
{
name: EVENTS.TEST_EVENT_3,
title: 'Test event 3',
payload: {
string: 'value',
number: 123,
array: [1, 2, 3],
object: {
string: 'value',
number: 123,
array: [1, 2, 3],
},
},
},
{
name: EVENTS.TEST_EVENT_4,
title: 'Test event 4',
payload: [
{
string: 'value',
number: 123,
array: [1, 2, 3],
},
{
string: 'value',
number: 123,
array: [1, 2, 3],
},
{
string: 'value',
number: 123,
array: [1, 2, 3],
},
],
},
]}
>
{getStory()}
</WithEvents>
))
.add('Logger', () => <Logger emiter={emiter} />);