Negligent Parachute Maintainers
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

@storybook/addon-centered

4.1.11 • Public • Published

Storybook Centered Decorator

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

Framework Support

Usage

npm install @storybook/addon-centered --save-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 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 />))

install

npm i @storybook/addon-centered

Downloadsweekly downloads

91,227

version

4.1.11

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

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