New
Storybook for full-stack developersAutomate with Chromatic
Star75,299
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-selector
A storybook addon to have selector for your preview
npm install storybook-addon-selector
Last updated almost 3 years ago
1
Downloads per week
Readme View on GitHub

Story Selector Addon

The Storybook selector addon can be used to select and share config between stories in Storybook.

Framework Support same as backgrounds addon

Installation

yarn add --dev storybook-addon-selector

or

npm i -D storybook-addon-selector

Configuration

Then create a file called main.js in your storybook config.

Add following content to it:

module.exports = {
  addons: ['storybook-addon-selector/register'],
};

Usage

Then write your stories like this:

import React from 'react';

export default {
  title: 'Button',
  parameters: {
    selector: [
      {
        name: 'unique-name1',
        icon: 'globe',
        title: 'title',
        options: [
          { value: 'value1', title: 'option1', default: true },
          { value: 'value2', title: 'option2' },
        ],
      },
      {
        name: 'unique-name2',
        icon: 'icon-name',
        title: 'title',
        options: [
          { value: 'value1', title: 'option1', default: true },
          { value: 'value2', title: 'option2' },
        ],
      },
    ],
  },
};

export const defaultView = () => <button>Click me</button>;

Then you can listen to addon channel for selected option

addons.getChannel().on('storybook/selector/unique-name/rendered', data => {
  console.log(data); // { value: 'value1', title: 'option1', default: true }
  forceReRender();
});
addons.getChannel().on('storybook/selector/unique-name/update', data => {
  console.log(data); // { value: 'value2', title: 'option2' }
});
addons.getChannel().on('storybook/selector/unique-name/destroying', () => {
  // do some codes
});

You can add the selectors to all stories with addParameters in .storybook/preview.js:

import { addParameters } from '@storybook/react'; // <- or your storybook framework

addParameters({
  selector: [
    {
      name: 'unique-name',
      icon: 'globe',
      title: 'title',
      options: [
        { value: 'value1', title: 'option1', default: true },
        { value: 'value2', title: 'option2' },
      ],
    },
  ],
});

If you want to override selectors for a single story or group of stories, pass the selector parameter:

import React from 'react';

export default {
  title: 'Button',
};

export const defaultView = () => <button>Click me</button>;
defaultView.story = {
  parameters: {
    selector: [
      {
        name: 'unique-name',
        icon: 'globe',
        title: 'title',
        options: [
          { value: 'value1', title: 'option1', default: true },
          { value: 'value2', title: 'option2' },
        ],
      },
    ],
  },
};

If you don't want to use selectors for a story, you can set the selector parameter to [] to skip the addon:

import React from 'react';

export default {
  title: 'Button',
};

export const noSelectors = () => <button>Click me</button>;
noSelectors.story = {
  parameters: {
    selector: [],
  },
};
Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI