npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

@storybook/addon-centered

5.1.9 • Public • Published

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

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);

install

npm i @storybook/addon-centered

Downloadsweekly downloads

68,287

version

5.1.9

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability