New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,490
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@netsells/storycap-default-background
This module syncs up the background of your project with the backgrounds selected in your stories parameters when used with [@storybook/addon-background](https://www.npmjs.com/package/@storybook/addon-backgrounds).
npm install @netsells/storycap-default-background
Last updated over 1 year ago
265
Downloads per week
Readme View on GitHub

Storycap Background Storybook Decorator

This module syncs up the background of your project with the backgrounds selected in your stories parameters when used with @storybook/addon-background.

Follow the @storybook/addon-background guide for settings up available backgrounds in your stories. This decorator will simply set the background to the value set as default: true in your background options when the story is captured by storycap.

Installation

yarn add -D @netsells/storycap-default-background

Usage

Enable globally:

import withDefaultBackground from '@netsells/storycap-default-background';

export const decorators = [
    withDefaultBackground,
];

Enable on a per story basis:

import withDefaultBackground from '@netsells/storycap-default-background';
import MyComponent from '../../../components/MyComponent';

// Enable for all stories in this file
export default {
    decorators: [
        withDefaultBackground,
    ],
};

export const myComponent = () => ({
    // ...component
});

// Enable for single story
myComponent.decorators = [
    withDefaultBackground,
];
Join the community
6,324 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI