Need private packages and team management tools?Check out npm Teams »

@storybook/addon-backgrounds

5.3.18 • Public • Published

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 main.js in your storybook config.

Add following content to it:

module.exports = {
  addons: ['@storybook/addon-backgrounds/register']
}

Usage

Then write your stories like this:

import React from 'react';
 
export default {
  title: 'Button',
  parameters: {
    backgrounds: [
      { name: 'twitter', value: '#00aced', default: true },
      { name: 'facebook', value: '#3b5998' },
    ]
  },
};
 
export const defaultView = () => (
  <button>Click me</button>
);

You can add the backgrounds to all stories with addParameters in .storybook/preview.js:

import { addParameters } from '@storybook/react'; // <- or your storybook framework
 
addParameters({
  backgrounds: [
    { name: 'twitter', value: '#00aced', default: true },
    { name: 'facebook', value: '#3b5998' },
  ],
});

If you want to override backgrounds for a single story or group of stories, pass the backgrounds parameter:

import React from 'react';
 
export default {
  title: 'Button',
}
 
export const defaultView = () => (
  <button>Click me</button>
);
defaultView.story = {
  parameters: {
    backgrounds: [
      { name: 'red', value: 'rgba(255, 0, 0)' },
    ],
  },
};

If you don't want to use backgrounds for a story, you can set the backgrounds parameter to [], or use { disable: true } to skip the addon:

import React from 'react';
 
export default {
  title: 'Button',
}
 
export const noBackgrounds = () => (
  <button>Click me</button>
);
noBackgrounds.story = {
  parameters: {
    backgrounds: [],
  },
};
 
export const disabledBackgrounds = () => (
  <button>Click me</button>
);
disabledBackgrounds.story = {
  parameters: {
    backgrounds: { disabled: true },
  },
};

Install

npm i @storybook/addon-backgrounds

DownloadsWeekly Downloads

152,359

Version

5.3.18

License

MIT

Unpacked Size

26.4 kB

Total Files

22

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar