Nimble Pirate Monitor

    storybook-addon-interaction

    1.0.1 • Public • Published

    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'),
                };
              },
            },
          },
        }
      );

    Keywords

    none

    Install

    npm i storybook-addon-interaction

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    31.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • jorcass
    • spenserj