Storybook Addon

Overview

The npm package “Storybook Addon @ React Theming” is a tool that allows developers to develop themed components in isolation. It can be used with any theming solution, including Styled Components, Emotion, Material-UI, and others. The addon provides features such as switching between themes, easily copying theme paths into code, auto-changing background colors, and supporting the dark Storybook theme.

Features

• Universal - can be used with any styling library
• Switching between themes from addon panel
• Change a color and see how it affects your components
• Easily copy-paste paths of nesting theme props into your code
• Auto changes background
• Supports dark Storybook theme
• Keep selected theme on stories updates

Installation

To use the Storybook Addon @ React Theming, follow these steps:

1. Specify the addon in .storybook/main.js or in .storybook/addons.js for older versions of Storybook.
2. Add a decorator with a ThemeProvider of your chosen styling library. This addon is not specific to any particular styling solution, so you can use any theme provider you’re already using in your project.
3. The ThemeProvider should accept a theme via theme props. This is usually the case for common styling libraries such as Styled Components, Emotion, and Material-UI.
4. If you are using a non-standard ThemeProvider, you can pass a providerFn function in the options.
5. Use the output of the selected value in your code.

Example code snippets:

// Main.js or Addons.js
module.exports = {
  addons: ['@storybook/addon-storysource', '@react-theming/storybook-addon/demo/register'],
};

// MyComponent.stories.js
import { ThemeProvider } from 'styled-components';

export default {
  title: 'MyComponent',
  decorators: [
    (Story) => (
      <ThemeProvider theme={theme}>
        <Story />
      </ThemeProvider>
    ),
  ],
};

Summary

The “Storybook Addon @ React Theming” is a versatile tool that allows developers to develop themed components in isolation. It supports various styling libraries and provides features such as theme switching, copying theme paths, and auto-changing background colors. By following the installation guide, developers can easily incorporate this addon into their projects and streamline their theming development process.