storybook-addon-selector
A storybook addon to have selector for your preview
npm install storybook-addon-selector
6
Downloads per week

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: [],
  },
};