New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@storybook/addon-backgrounds

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-backgrounds

Switch backgrounds to view components in different settings

  • 0.0.0-pr-30070-sha-11e0729d
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.9M
decreased by-3.01%
Maintainers
0
Weekly downloads
 
Created

What is @storybook/addon-backgrounds?

The @storybook/addon-backgrounds package is a Storybook addon that allows developers to switch between different backgrounds for their components' preview in the Storybook UI. It is useful for visualizing how components look against different backgrounds and can be used to simulate different environments.

What are @storybook/addon-backgrounds's main functionalities?

Setting default backgrounds

This feature allows you to set default backgrounds that will be available for all stories. You can specify a default background that will be pre-selected when a story is loaded.

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

Configuring backgrounds for individual stories

This feature allows you to configure backgrounds for individual stories. You can override the default backgrounds for specific stories to tailor the background to the component's needs.

import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
  .addParameters({
    backgrounds: [
      { name: 'dark', value: '#222222' },
      { name: 'light', value: '#eeeeee' },
    ],
  })
  .add('with text', () => <button>Click me</button>);

Other packages similar to @storybook/addon-backgrounds

FAQs

Package last updated on 16 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts