@storybook/addon-centered
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.21 • Public • Published

    Storybook Centered Decorator

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

    Framework Support

    ⚠️ This addon applies styling to the view in order to center the component. This may impact the look and feel of story.

    Usage

    yarn add @storybook/addon-centered --dev

    You can set the decorator locally.

    example for React:

    import { storiesOf } from '@storybook/react';
    import centered from '@storybook/addon-centered/react';
    
    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/vue';
    
    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 { storiesOf } from '@storybook/angular';
    import { centered } from '@storybook/addon-centered/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 { moduleMetadata, storiesOf } from '@storybook/angular';
    import { centered } from '@storybook/addon-centered/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/react';
    
    addDecorator(centered);
    
    configure(function () {
      //...
    }, module);

    example for Vue:

    import { configure, addDecorator } from '@storybook/vue';
    import centered from '@storybook/addon-centered/vue';
    
    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);

    If you don't want to use centered for a story, you can disable it by using { disable: true } to skip the addon:

    import React from 'react';
    import { storiesOf } from '@storybook/react';
    
    storiesOf('Button', module)
      .add('example', () => <button>Click me</button>, {
        centered: { disable: true },
      });

    Install

    npm i @storybook/addon-centered

    DownloadsWeekly Downloads

    39,526

    Version

    5.3.21

    License

    MIT

    Unpacked Size

    27.8 kB

    Total Files

    59

    Last publish

    Collaborators