38 lines
1.1 KiB
Markdown
Raw Normal View History

2017-08-28 13:23:23 -07:00
# Storybook Viewport Addon
Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybookjs.org). This helps build responsive components inside of Storybook.
This addon works with Storybook for: [React](https://github.com/storybooks/storybook/tree/master/app/react) and [Vue](https://github.com/storybooks/storybook/tree/master/app/vue).
2017-08-31 15:01:57 -07:00
![Screenshot](https://github.com/storybooks/storybook/blob/master/docs/viewport.png)
2017-08-28 13:23:23 -07:00
## Installation
Install the following npm module:
2017-08-31 15:01:57 -07:00
npm i --save-dev @storybook/addon-viewport
2017-08-28 13:23:23 -07:00
or with yarn:
yarn add -D @storybook/addon-viewport
## Basic Usage
Simply import the Storybook Viewport Addon in the `addon.js` file in your `.storybook` directory.
```js
import '@storybook/addon-viewport/register'
```
This will register the Viewport Addon to Storybook and will show up in the action area.
## FAQ
2017-08-31 15:01:57 -07:00
#### How do I add a new device?
2017-08-28 13:23:23 -07:00
Unfortunately, this is currently not supported.
2017-08-31 15:01:57 -07:00
#### How can I make a custom screen size?
2017-08-28 13:23:23 -07:00
Unfortunately, this is currently not supported.