New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,387
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-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
Last updated over 3 years ago
24
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'),
            };
          },
        },
      },
    }
  );
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI