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 almost 5 years ago
199
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
6,562 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI