Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/philcockfield/storybook-host
A React Storybook decorator with helpful display options for hosting components under test.
https://github.com/philcockfield/storybook-host
Last synced: 3 months ago
JSON representation
A React Storybook decorator with helpful display options for hosting components under test.
- Host: GitHub
- URL: https://github.com/philcockfield/storybook-host
- Owner: philcockfield
- License: mit
- Archived: true
- Created: 2016-10-20T18:02:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-20T09:12:42.000Z (almost 2 years ago)
- Last Synced: 2024-04-10T03:18:27.816Z (3 months ago)
- Language: TypeScript
- Size: 1.71 MB
- Stars: 126
- Watchers: 6
- Forks: 19
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-test - Host
README
# storybook-host
[](https://travis-ci.org/philcockfield/storybook-host)
A [React Storybook](https://storybooks.js.org/) decorator with powerful display options for
hosting, sizing and framing your components.
## Install
npm install -D storybook-host
## Try in Storybook
npm start
## Usage
```js
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', () => );
```
## Properties
```js
host({
title: ,
hr: ,
align: ,
height: ,
width: ,
background: ,
backdrop: ,
cropMarks: ,
border: ,
padding: ,
});
```
#### `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.