@storybook/addons

Addon Registration

This feature allows developers to register new addons with Storybook. The code sample demonstrates how to import the addons API and use it to register a custom addon.

import { addons } from '@storybook/addons';
import MyAddon from './my-addon';

addons.register('my-addon', MyAddon);

Addon Panel Creation

This feature allows developers to create new panels in the Storybook UI. The code sample shows how to add a new panel using the addons API.

import { addons, types } from '@storybook/addons';
import MyPanel from './my-panel';

addons.add('my-panel', {
  type: types.PANEL,
  title: 'My Panel',
  render: ({ active, key }) => (
    <MyPanel active={active} key={key} />
  )
});

Addon Tool Registration

This feature enables the addition of tools to the Storybook toolbar. The code sample illustrates how to register a new tool that will be displayed when the view mode is set to 'story'.

import { addons, types } from '@storybook/addons';
import MyTool from './my-tool';

addons.add('my-tool', {
  type: types.TOOL,
  title: 'My Tool',
  match: ({ viewMode }) => viewMode === 'story',
  render: MyTool
});