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

npm install -D storybook-host

npm start

import { storiesOf } from '@kadira/storybook'
import { host } from 'storybook-host';
import { MyComponent } from './MyComponent'

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

host({
  mobXDevTools: <boolean>,
  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>,
});

Flag indicating if the mobXDevTools at the bottom should be shown. Default: true.

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.

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

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

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

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

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)

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

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

Optional border for the component.

The padding of the host container.