Socket
Socket
Sign inDemoInstall

@storybook/addon-toolbars

Package Overview
Dependencies
0
Maintainers
8
Versions
1103
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

@storybook/addon-toolbars

Create your own toolbar items that control story rendering

    7.6.17latest
    GitHub
    npm

Version published
Maintainers
8
Weekly downloads
4,781,186
increased by7.09%

Weekly downloads

Package description

What is @storybook/addon-toolbars?

The @storybook/addon-toolbars package allows developers to add custom toolbars to their Storybook UI. These toolbars can be used to control various aspects of the stories being displayed, such as themes, locales, or any other context that might need to be adjusted dynamically. It enhances the development experience by providing a more interactive and customizable environment for testing UI components.

What are @storybook/addon-toolbars's main functionalities?

Global Toolbars

This feature allows you to add global toolbars that affect all stories. In the code sample, a global 'Theme' toolbar is defined with 'light', 'dark', and 'custom' options.

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      items: ['light', 'dark', 'custom'],
      showName: true,
    },
  },
};

Story-Specific Toolbars

This feature allows you to use toolbars to control story-specific parameters. The code sample shows a decorator that wraps the story in a ThemeProvider, which uses the global 'theme' parameter set by the toolbar.

export const decorators = [
  (Story, context) => (
    <ThemeProvider theme={context.globals.theme}>
      <Story />
    </ThemeProvider>
  ),
];

Other packages similar to @storybook/addon-toolbars

Changelog

Source

7.6.17

  • Addon-docs: Fix Table of Contents heading leak - #23677, thanks @vmizg!
  • Core: Update ip version to fix CVE-2023-42282 - #26086, thanks @drik98!

Readme

Source

Storybook Toolbars Addon

The Toolbars addon controls global story rendering options from Storybook's toolbar UI. It's a general purpose addon that can be used to:

  • set a theme for your components
  • set your components' internationalization (i18n) locale
  • configure just about anything in Storybook that makes use of a global variable

Framework Support

Screenshot

Installation

Toolbars is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-toolbars

Then, add following content to .storybook/main.js:

export default {
  addons: ['@storybook/addon-toolbars'],
};

Usage

The usage is documented in the documentation.

FAQs

How does this compare to addon-contexts?

Addon-toolbars is the successor to addon-contexts, which provided convenient global toolbars in Storybook's toolbar.

The primary difference between the two packages is that addon-toolbars makes use of Storybook's new Story Args feature, which has the following advantages:

  • Standardization. Args are built into Storybook in 6.x. Since addon-toolbars is based on args, you don't need to learn any addon-specific APIs to use it.

  • Ergonomics. Global args are easy to consume in stories, in Storybook Docs, or even in other addons.

  • Framework compatibility. Args are completely framework-independent, so addon-toolbars is compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon.

Keywords

FAQs

Last updated on 20 Feb 2024

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc