storybook-addon-custom-properties

0.0.2 • Public • Published

Storybook Custom Properties Addon

Storybook Custom Properties Addon allows you to set a Custom Properties in the Preview Area. This helps to change the style of the Storybook via Custom Properties.

Installation

Install the following npm module:

npm i --save-dev storybook-addon-custom-properties

within .storybook/main.js:

module.exports = {
  addons: ['storybook-addon-custom-properties/register'],
};

Configuration

Configured by story parameters with the custom-properties key.

import { withCustomProperties } from 'storybook-addon-custom-properties';
 
addParameters({
  'custom-properties': {
    label: 'Theme',
    list: [
      { '--somekeyword': 'left' },
      { '--somecolor': '#0000ff' },
      { '--somecomplexvalue': '3px 6px rgb(20, 32, 54)' }, 
    ]
  }
});
 
addDecorator(withCustomProperties);

TODO

  • Doc
  • Ts
  • formatter

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.2
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.2
    1
  • 0.0.1
    0

Package Sidebar

Install

npm i storybook-addon-custom-properties

Weekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

19.3 kB

Total Files

21

Last publish

Collaborators

  • t4y3