react-storybook-addon-backgrounds

Getting Started

npm i --save react-storybook-addon-backgrounds

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

Add following content to it:

import '@kadira/storybook/addons';
import 'react-storybook-addon-backgrounds/register';

Then write your stories like this:

import React from 'react';
import { storiesOf } from "@kadira/storybook";
import backgrounds from "react-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>)
  ;

Development

This project is built using typescript and is tested with jest. To get started, clone this repo and run the following command:

$ npm install # install node deps

To run the project locally, run:

$ npm run storybook # for storybook testing
# (coming soon) $ npm run test-watch # for testing

To test the project run:

$ npm test

Change Log

vNext

v0.0.7

• Bug: Default background will now auto set if nothing is set in the url #23

v0.0.6

• Feature: Allow setting a background as a default #21

v0.0.5

• Feature: Allow background images instead of just color #15
• Bug: Fixed scrolling in fixed position container #17
• Bug: Fixed typescript def file link #19

v0.0.4

• Feature: Added support for HMR when used as a global decorator #14 @Coobaha

v0.0.3

• Docs: Added correct usage pattern for registering addon #10
• Feature: Mapped current background color to the query string #11

v0.0.2

• Bug: Fixed export of type definitions for typescript projects

v0.0.1

• Initial release