Package Exports

@storybook/addon-backgrounds
@storybook/addon-backgrounds/register

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@storybook/addon-backgrounds) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook Addon Backgrounds

Storybook Background Addon can be used to change background colors inside the preview in Storybook.

Framework Support

React Storybook Screenshot

Installation

npm i -D @storybook/addon-backgrounds

Configuration

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

Add following content to it:

import '@storybook/addon-backgrounds/register';

Usage

Then write your stories like this:

import React from 'react';
import { storiesOf } from "@storybook/react";
import backgrounds from "@storybook/addon-backgrounds";

storiesOf("Button", module)
  .addDecorator(backgrounds([
    { name: "twitter", value: "#00aced", default: true },
    { name: "facebook", value: "#3b5998" },
  ]))
  .add("with text", () => <button>Click me</button>);

Of course it's easy to create a library module so you can re-use:

import addonBackgrounds from "@storybook/addon-backgrounds";

export const backgrounds = addonBackgrounds([
  { name: "twitter", value: "#00aced", default: true },
  { name: "facebook", value: "#3b5998" },
]);

import React from 'react';
import { storiesOf } from "@storybook/react";

import { backgrounds } from "./my-lib";

storiesOf("Button", module)
  .addDecorator(backgrounds)
  .add("with text", () => <button>Click me</button>);

In the case of Mithril, use these imports:

import { storiesOf } from '@storybook/mithril';
import backgrounds from "@storybook/addon-backgrounds/mithril";