$ npm install @storybook/addon-backgrounds
Storybook Background Addon can be used to change background colors inside the preview in Storybook.
npm i -D @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';
storiesOf('Button', module)
.addParameters({
backgrounds: [
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
],
})
.add('with text', () => <button>Click me</button>);
You can add the backgrounds to all stories with addParameters
in .storybook/config.js
:
import { addParameters } from '@storybook/react'; // <- or your storybook framework
addParameters({
backgrounds: [
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
],
});
// should be before configure()
If you want to override backgrounds for a single story or group of stories, pass the backgrounds
parameter:
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.add('with text', () => <button>Click me</button>, {
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';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.add('example 1', () => <button>Click me</button>, {
backgrounds: [],
});
storiesOf('Button', module)
.add('example 2', () => <button>Click me</button>, {
backgrounds: { disable: true },
});
If you want to react to a background change—for instance to implement some custom logic in your Storybook—you can subscribe to the storybook/background/update
event. It will be emitted when the user changes the background.
addonAPI.getChannel().on('storybook/background/update', (bg) => {
console.log('Background color', bg.selected);
console.log('Background name', bg.name);
});
© 2010 - cnpmjs.org x YWFE | Home | YWFE