https://github.com/jakelazaroff/react-storybook-decorator-background

Background colors for your React Storybook
https://github.com/jakelazaroff/react-storybook-decorator-background

Last synced: about 2 months ago
JSON representation

Background colors for your React Storybook

• Host: GitHub
• URL: https://github.com/jakelazaroff/react-storybook-decorator-background
• Owner: jakelazaroff
• License: mit
• Created: 2016-08-20T03:36:59.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-30T11:28:41.000Z (over 7 years ago)
• Last Synced: 2024-10-28T14:24:39.110Z (2 months ago)
• Language: JavaScript
• Size: 81.1 KB
• Stars: 26
• Watchers: 4
• Forks: 7
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-storybook-decorator-background

Background colors for your React Storybook.

[![npm](https://img.shields.io/npm/dm//react-storybook-decorator-background.svg?maxAge=2592000)](https://www.npmjs.com/package/react-storybook-decorator-background)

![Preview your React components on different background colors.](preview.gif?raw=true)

## Installation

```bash

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

```

## Usage

react-storybook-decorator-background is a [React Storybook decorator](https://github.com/kadirahq/react-storybook/blob/master/docs/extensions.md#decorators):

```javascript

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:

```javascript

import { configure, addDecorator } from '@kadira/storybook';

import { BackgroundColor } from 'react-storybook-decorator-background';

addDecorator(story => );

configure(() => {

  // ...

}, module);

```