react-storybook-decorator-background

Background colors for your React Storybook.

Installation

npm install --save-dev react-storybook-decorator-background

Usage

react-storybook-decorator-background is a React Storybook decorator:

import { configure, addDecorator } from '@kadira/storybook';
import backgroundColor from 'react-storybook-decorator-background';
 
addDecorator(backgroundColor(['#ffffff', '#000000']));
 
configure(() => {
  // ...
}, module);

When you call backgroundColor with a list of hex codes, it'll create the swatches in that order on the bottom right of the story preview. The first color in the list will be the default background color.

If you'd rather the React component than the decorator function:

import { configure, addDecorator } from '@kadira/storybook';
import { BackgroundColor } from 'react-storybook-decorator-background';
 
addDecorator(story => <BackgroundColor colors={['#ffffff', '#000000']} story={story} />);
 
configure(() => {
  // ...
}, module);