React Storybook comes with an extensions API to customize the storybook experience. Let's have a look at them.
A decorator is a way to wrap an story with a common set of component(s). Let's say you want to center all your stories. Then this is how we can do it with a decorator:
import React from 'react';
import { storiesOf } from '@kadira/storybook';
import MyComponent from '../my_component';
storiesOf('MyComponent', module)
.addDecorator((story) => (
<div style={{textAlign: 'center'}}>
{story()}
</div>
));
.add('without props', () => (<MyComponent />))
.add('with some props', () => (<MyComponent text="The Comp"/>));
Here we only add the decorator for the current set of stories for a given story kind.
But, you can add a decorator globally and it'll be applied to all the stories you create. This is how to add a decorator like that.
import { configure, addDecorator } from '@kadira/storybook';
addDecorator((story) => (
<div style={{textAlign: 'center'}}>
{story()}
</div>
));
configure(function () {
...
}, module);
With an addon, you can introduce new methods to the story creation API. For an example, you can achieve the above centered component functionality with an addon like this:
import React from 'react';
import { storiesOf } from '@kadira/storybook';
import MyComponent from '../my_component';
storiesOf('MyComponent', module)
.addWithCentered('without props', () => (<MyComponent />))
.addWithCentered('with some props', () => (<MyComponent text="The Comp"/>));
Here we are using a new API called addWithCentered
. That's introduce by an addon.
This is how we set that addon.
import { configure, setAddon } from '@kadira/storybook';
setAddon({
addWithCentered(storyName, storyFn) {
// You can access the .add and other API added by addons in here.
this.add(storyName, (context) => (
<div style={{textAlign: "center"}}>
{storyFn(context)}
</div>
));
}
});
configure(function () {
...
}, module);
Rather than creating extensions yourself, you can use extensions available below:
Feel free to include your extension to the above list and share it with other.
Just make it available on NPM (and GitHub) and send a PR to this page.