UNPKG

2.75 kBMarkdownView Raw
1# storybook-host
2[![Build Status](https://travis-ci.org/philcockfield/storybook-host.svg?branch=master)](https://travis-ci.org/philcockfield/storybook-host)
3
4A [React Storybook](https://getstorybook.io/) decorator with powerful display options for
5hosting, sizing and framing your components.
6
7
8
9
10## Install
11
12 npm install -D storybook-host
13
14## Try in Storybook
15
16 npm start
17
18## Usage
19
20```js
21import { storiesOf } from '@kadira/storybook'
22import { host } from 'storybook-host';
23import { MyComponent } from './MyComponent'
24
25storiesOf('helpers.storybook', module)
26 .addDecorator(host({
27 title: 'A host container for components under test.',
28 align: 'center bottom',
29 height: '80%',
30 width: 400,
31 }))
32 .add('Component', () => <MyComponent/>);
33
34```
35
36![Screen Shot](https://cloud.githubusercontent.com/assets/185555/19583290/dc0041fc-9797-11e6-9893-62bb03822eca.png)
37
38
39
40
41## Properties
42
43```js
44host({
45 title: <string>,
46 hr: <boolean>,
47 align: <string>,
48 height: <number | string>,
49 width: <number | string>,
50 background: <boolean | number | string>,
51 backdrop: <boolean | number | string>,
52 cropMarks: <boolean>,
53 border: <boolean | number | string>,
54 padding: <number | string>,
55});
56```
57
58
59#### `title: string`
60The title display that is displayed at the top of the window.
61Use this to to name and provide a decription of the component under test.
62
63#### `hr: boolean`
64Flag indicating if the horizontal rule under the title should be shown. Default: `true`.
65
66
67#### `align: string [x y]`
68A string indicating how to align the component within the host. The string takes to parts (`x` and `y`)
69seperated by a space. The order of horizontal vs. vertical does not matter,
70eg `top left` is the same as `left top`.
71
72- Horizontal (X)
73 - `left`
74 - `center`
75 - `right`
76- Vertical (Y)
77 - `top`
78 - `middle`
79 - `bottom`
80
81
82#### `width: number | string | undefined`
83The width to lock the component at, eg: `400` (number as pixels) or `400px` or `100%`.
84
85#### `height: number | string | undefined`
86The height to lock the component at, eg: `200` (number as pixels) or `200px` or `100%`.
87
88#### `background: boolean | number | string`
89The background color to draw behind the component.
90- `true`: ruby red (eg. `rgba(255, 0, 0, 0.1)`). Useful for quick visualization of component size.
91- `string`: A CSS background-color value.
92- `number (-1:black..0..1:white)`
93
94#### `backdrop: boolean | number | string`
95The background color of the entire host panel. Same value types as `background`.
96
97#### `cropMarks: boolean`
98Flag indicating if the crop-marks should be visible. Default: `true`.
99
100#### `border: string | number | boolean`
101Optional border for the component.
102
103#### `padding: number | string`
104The padding of the host container.
105