storybook-host
A React Storybook decorator with helpful display options for hosting components under test
Last updated a month ago by philcockfield .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install storybook-host 
SYNC missed versions from official npm registry.

storybook-host

Build Status

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

Install

npm install -D storybook-host

Try in Storybook

npm start

Usage

import { storiesOf } from '@storybook/react';
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('MyComponent', () => <MyComponent />);

Screen Shot

Properties

host({
  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.

Current Tags

  • 5.2.0                                ...           latest (a month ago)

32 Versions

  • 5.2.0                                ...           a month ago
  • 5.1.0                                ...           a year ago
  • 5.0.3                                ...           2 years ago
  • 5.0.2                                ...           2 years ago
  • 5.0.1                                ...           2 years ago
  • 5.0.0                                ...           2 years ago
  • 4.1.5                                ...           3 years ago
  • 4.1.4                                ...           3 years ago
  • 4.1.3                                ...           3 years ago
  • 4.1.2                                ...           3 years ago
  • 4.1.1                                ...           3 years ago
  • 4.1.0                                ...           3 years ago
  • 4.0.0                                ...           3 years ago
  • 3.0.0                                ...           3 years ago
  • 2.0.0-alpha.1                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.14                                ...           4 years ago
  • 1.0.13                                ...           4 years ago
  • 1.0.12                                ...           4 years ago
  • 1.0.11                                ...           4 years ago
  • 1.0.10                                ...           4 years ago
  • 1.0.9                                ...           4 years ago
  • 1.0.8                                ...           4 years ago
  • 1.0.7                                ...           4 years ago
  • 1.0.6                                ...           4 years ago
  • 1.0.5                                ...           4 years ago
  • 1.0.4                                ...           4 years ago
  • 1.0.3                                ...           4 years ago
  • 1.0.2                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 3
This Month 1
Last Day 1
Last Week 5
Last Month 18
Dependencies (5)
Dev Dependencies (22)

Copyright 2014 - 2016 © taobao.org |