Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    5.2.0 • Public • Published


    Build Status

    A React Storybook decorator with powerful display options for hosting, sizing and framing your components.


    npm install -D storybook-host

    Try in Storybook

    npm start


    import { storiesOf } from '@storybook/react';
    import { host } from 'storybook-host';
    import { MyComponent } from './MyComponent';
    storiesOf('helpers.storybook', module)
          title: 'A host container for components under test.',
          align: 'center bottom',
          height: '80%',
          width: 400,
      .add('MyComponent', () => <MyComponent />);

    Screen Shot


      title: <string>,
      hr: <boolean>,
      align: <string>,
      height: <number | string>,
      width: <number | string>,
      background: <boolean | number | string>,
      backdrop: <boolean | number | string>,
      cropMarks: <boolean>,
      border: <boolean | number | string>,
      padding: <number | string>,

    title: string

    The title display that is displayed at the top of the window. Use this to to name and provide a decription of the component under test.

    hr: boolean

    Flag indicating if the horizontal rule under the title should be shown. Default: true.

    align: string [x y]

    A string indicating how to align the component within the host. The string takes to parts (x and y) seperated by a space. The order of horizontal vs. vertical does not matter, eg top left is the same as left top.

    • Horizontal (X)
      • left
      • center
      • right
    • Vertical (Y)
      • top
      • middle
      • bottom

    width: number | string | undefined

    The width to lock the component at, eg: 400 (number as pixels) or 400px or 100%.

    height: number | string | undefined

    The height to lock the component at, eg: 200 (number as pixels) or 200px or 100%.

    maxWidth: number | string | undefined

    The maximum width to restrict the component to, eg: 400 (number as pixels) or 400px or 100%.

    background: boolean | number | string

    The background color to draw behind the component.

    • true: ruby red (eg. rgba(255, 0, 0, 0.1)). Useful for quick visualization of component size.
    • string: A CSS background-color value.
    • number (-1:black..0..1:white)

    backdrop: boolean | number | string

    The background color of the entire host panel. Same value types as background.

    cropMarks: boolean

    Flag indicating if the crop-marks should be visible. Default: true.

    border: string | number | boolean

    Optional border for the component.

    padding: number | string

    The padding of the host container.


    npm i storybook-host

    DownloadsWeekly Downloads






    Unpacked Size

    138 kB

    Total Files


    Last publish


    • avatar