Skip to content
This repository has been archived by the owner. It is now read-only.
REPO/PACKAGE MOVED - A Storybook addon to customize the background of your preview
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
src
.babelrc
.gitignore
.npmignore
.travis.yml
AUTHORS
CHANGELOG.md
CONTRIBUTING.md
LICENSE
README.md
package.json
register.js

README.md

addon-backgrounds

Build Status

React Storybook Screenshot

Getting Started

npm i --save @storybook/addon-backgrounds

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

Add following content to it:

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

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

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
You can’t perform that action at this time.