Wondering what’s next for npm?Check out our public roadmap! »

    storybook-addon-styled-component-theme
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    npm version build status codecov

    This addon allows storybook to showcase components with multiple different styled-component themes. Supports storybook v4, v5, v6 and newer

    Installation

    yarn add storybook-addon-styled-component-theme --dev

    Configuration

    storybook v6

    Add a decorator to stories in .storybook/preview.js

    import { addDecorator } from "@storybook/react";
    import { withThemesProvider } from "storybook-addon-styled-component-theme";
    import { ThemeProvider } from "styled-components";
    
    const themes = [theme1, theme2];
    addDecorator(withThemesProvider(themes), ThemeProvider);

    Add to .storybook/main.js

    module.exports = {
      ...
      addons: [
        ...
        "storybook-addon-styled-component-theme/dist/preset"
      ]
    };
    

    storybook v5 and v4

    Add to .storybook/addons.js

    // v1.3, storybook v5.2
    import "storybook-addon-styled-component-theme/dist/register";
    
    // v1.2, storybook v4, v5.0
    import "storybook-addon-styled-component-theme/dist/src/register";

    addDecorator to .storybook/preview.js

    import { addDecorator } from "@storybook/react";
    import { withThemesProvider } from "storybook-addon-styled-component-theme";
    
    const themes = [theme1, theme2];
    addDecorator(withThemesProvider(themes));

    Remind

    Make sure every theme object has a name property

    Contributing

    Build local library
    yarn
    
    yarn build
    Start the local example
    cd example
    
    yarn
    
    yarn storybook

    Run all the spec

    yarn test

    Install

    npm i storybook-addon-styled-component-theme

    DownloadsWeekly Downloads

    19,034

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    25.1 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar