centered

Storybook Centered Decorator

Storybook Centered Decorator can be used to center components inside the preview in Storybook.

Framework Support

Usage

yarn add @storybook/addon-centered --dev

As a decorator

You can set the decorator locally.

example for React:

import { storiesOf } from '@storybook/react';
import centered from '@storybook/addon-centered';

import MyComponent from '../Component';

storiesOf('MyComponent', module)
  .addDecorator(centered)
  .add('without props', () => (<MyComponent />))
  .add('with some props', () => (<MyComponent text="The Comp"/>));

example for Vue:

import { storiesOf } from '@storybook/vue';
import centered from '@storybook/addon-centered';

import MyComponent from '../Component.vue';
storiesOf('MyComponent', module)
  .addDecorator(centered)
  .add('without props', () => ({
    components: { MyComponent },
    template: '<my-component />'
  }))
  .add('with some props', () => ({
    components: { MyComponent },
    template: '<my-component text="The Comp"/>'
  }));

example for Preact:

import { storiesOf } from '@storybook/preact';
import centered from '@storybook/addon-centered/preact';

import MyComponent from '../Component';

storiesOf('MyComponent', module)
  .addDecorator(centered)
  .add('without props', () => (<MyComponent />))
  .add('with some props', () => (<MyComponent text="The Comp"/>));

example for Svelte:

import { storiesOf } from '@storybook/svelte';
import Centered from '@storybook/addon-centered/svelte';

import Component from '../Component.svelte';

storiesOf('Addon|Centered', module)
  .addDecorator(Centered)
  .add('rounded', () => ({
    Component,
    data: {
      rounded: true,
      text: "Look, I'm centered!",
    },
  }))

example for Mithril:

import { storiesOf } from '@storybook/mithril';
import centered from '@storybook/addon-centered/mithril';

import MyComponent from '../Component';

storiesOf('MyComponent', module)
  .addDecorator(centered)
  .add('without props', () => ({
    view: () => <MyComponent />
  }))
  .add('with some props', () => ({
    view: () => <MyComponent text="The Comp"/>
  }));

example for Angular with component:

import { centered } from '@storybook/addon-centered/angular';
import { storiesOf } from '@storybook/angular';
import { AppComponent } from '../app/app.component';

storiesOf('Addon|Centered', module)
  .addDecorator(centered)
  .add('centered component', () => ({
    component: AppComponent,
    props: {},
  }));

example for Angular with template:

import { centered } from '@storybook/addon-centered/angular';
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { AppComponent } from '../app/app.component';

storiesOf('Addon|Centered', module)
  .addDecorator(
    moduleMetadata({
      declarations: [Button],
    })
  )
  .addDecorator(centered)
  .add('centered template', () => ({
    template: `<storybook-button-component
        [text]="text" (onClick)="onClick($event)">
      </storybook-button-component>`,
    props: {
      text: 'Hello Button',
      onClick: event => {
        console.log('some bindings work');
        console.log(event);
      },
    },
  }));

Also, you can also add this decorator globally

example for React:

import { configure, addDecorator } from '@storybook/react';
import centered from '@storybook/addon-centered';

addDecorator(centered);

configure(function () {
  //...
}, module);

example for Vue:

import { configure, addDecorator } from '@storybook/vue';
import centered from '@storybook/addon-centered';

addDecorator(centered);

configure(function () {
  //...
}, module);

example for Svelte:

import { configure, addDecorator } from '@storybook/svelte';
import Centered from '@storybook/addon-centered/svelte';

addDecorator(Centered);

configure(function () {
  //...
}, module);

example for Mithril:

import { configure, addDecorator } from '@storybook/mithril';
import centered from '@storybook/addon-centered/mithril';

addDecorator(centered);

configure(function () {
  //...
}, module);

As an extension

1 - Configure the extension

import { configure, setAddon } from '@storybook/react';
import centered from '@storybook/addon-centered';

setAddon({
  addCentered(storyName, storyFn) {
    this.add(storyName, (context) => (
      centered.call(context, storyFn)
    ));
  },
});

configure(function () {
  //...
}, module);

2 - Use it in your story

import { storiesOf } from '@storybook/react';

import Component from '../Component';

storiesOf('Component', module)
  .addCentered('without props', () => (<Component />))