JSPM

@storybook/addon-backgrounds

3.3.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6974038
  • Score
    100M100P100Q230773F
  • License MIT

A storybook addon to show different backgrounds for your preview

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

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