New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@gridscale/storybook-addon-root-attribute
Modified version of Storybook Addon Root Attribute to switch html or body attribute at runtime for your story
npm install @gridscale/storybook-addon-root-attribute
Last updated over 2 years ago
5
Downloads per week
Readme View on GitHub

Storybook Addon Root Attribute Build Status

Storybook Addon Root Attribute to switch html, body or some element attribute at runtime for your story Storybook

Demo

This fork

This fork renamed the Tab to "Skins" and also allows a root2 attribute and a value2 attribute in the state to change more than one node

Installation

yarn add -D storybook-addon-root-attribute

Configuration

Then create a file called addons.js in your storybook config.

Add following content to it:

import "storybook-addon-root-attribute/register";

If you want to use a toolbar instead of a panel, you need to add this instead previous import:

import 'storybook-addon-root-attribute/registerToolbar';

Usage

You need add the all the attribute values at compile time using the withRootAttribute decorator. They can be added globally or per story. You can then choose which ones root attribute activate on addon ui:

// Import from @storybook/X where X is your framework
import {
  configure,
  addDecorator,
  addParameters,
  storiesOf
} from "@storybook/react";
import { withRootAttribute } from "storybook-addon-root-attribute";

// global
addDecorator(withRootAttribute);
addParameters({
  rootAttribute: {
    defaultState: {
      name: "Default",
      value: null
    },
    states: [
      {
        name: "Dark",
        value: "dark"
      }
    ]
  }
});

You can use the rootAttribute parameter to override resources on each story individually:

// per story
storiesOf("Addons|RootAttribute", module).add(
  "Camera Icon",
  () => <i className="fa fa-camera-retro"> Camera Icon</i>,
  {
    rootAttribute: {
      defaultState: {
        name: "Default",
        value: null
      },
      states: [
        {
          name: "Dark",
          value: "dark"
        }
      ]
    }
  }
);

Configuration

Configuration params for rootAttribute parameter:

Name Default Variants Description
root 'html' 'html', 'body', or first element returned by 'document.querySelector(), or if none found -- 'html'' Root node, which attribute will changed by addon
root2 null 'html', 'body', or first element returned by 'document.querySelector(), or if none found -- 'html'' A second Root node, which attribute will changed by addon
attribute 'class' any valid attribute name Attribute name
defaultState {} should contain name and value Default state for attribute. Value nil will remove attribute from root
states [] array with objects, which contain unique name and value for attribute All needed states for attribute values. Each object should contain unique name (for button) and value for attribute

Configuration example:

addDecorator(withRootAttribute);
addParameters({
  rootAttribute: {
    root: "html",
    root2: "#cssprops",
    attribute: "class",
    defaultState: {
      name: "Default",
      value: null,
      value2: null
    },
    states: [
      {
        name: "Dark",
        value: "dark"
        value2: "dark.props.css"
      },
      {
        name: "A11Y",
        value: "accessibility",
        value2: "dark.props.css"
      }
    ]
  }
});
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI