react-storybook-decorator-background

Background colors for your React Storybook

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-storybook-decorator-background
2641.0.57 years ago8 years agoMinified + gzip package size for react-storybook-decorator-background in KB

Readme

react-storybook-decorator-background
Background colors for your React Storybook.
npm
Preview your React components on different background colors.

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);