storybook-addon-interaction
Storybook Addon Interaction can be used to provide components with an external source of state and actions that will update that state.
npm install storybook-addon-interaction
198
Downloads per week
Readme View on GitHub
Storybook Addon Interaction
Storybook Addon Interaction can be used to provide components with an external source of state and actions that will update that state.
Sponsored by VizworX Inc.
Getting Started
Install:
npm i -D jorcass/storybook-addon-interaction
Then, add the following to .storybook/addons.js
import 'storybook-addon-interaction/register';
Import the withInteraction
function and use it to provide stories with state
and actions. Use the getInteractionProps
function to provide the props to your
stories.
import { storiesOf } from '@storybook/react';
import withInteraction, { getInteractionProps } from 'storybook-addon-interaction';
const Button = (props) => (
<button
type="button"
onClick={props.onClick}
style={{ background: props.background || 'grey' }}
>
Clicked {props.clickCount} times
</button>
);
storiesOf('Button', module)
.addDecorator(withInteraction({
state: { clickCount: 0 },
actions: {
onClick: state => (e) => {
e.preventDefault();
return { clickCount: state.clickCount + 1 };
},
},
}))
.add('default view', () => <Button {...getInteractionProps()} />)
.add(
'with story parameters',
() => <Button {...getInteractionProps()} />,
{
interaction: {
state: { background: 'pink' },
actions: {
onClick: state => (e) => {
e.preventDefault();
return {
clickCount: state.clickCount + 1,
background: (state.background === 'pink' ? 'grey' : 'pink'),
};
},
},
},
}
);