diff --git a/addons/viewport/README.md b/addons/viewport/README.md index 05107e1f1da0..e345fed52916 100644 --- a/addons/viewport/README.md +++ b/addons/viewport/README.md @@ -26,12 +26,60 @@ import '@storybook/addon-viewport/register' This will register the Viewport Addon to Storybook and will show up in the action area. -## FAQ +## Add New Device -#### How do I add a new device? +After importing the Storybook Viewport Addon in the `addons.js` file as described earlier, you need to add the new device in the `config.js` file in your `.storybook` directory. -Unfortunately, this is currently not supported. +```js +import { addViewports } from '@storybook/addon-viewport'; + +const newViewports = { + kindleFire2: { + name: 'Kindle Fire 2', + styles: { + width: '600px', + height: '963px' + } + }, + kindleFireHD: { + name: 'Kindle Fire HD', + styles: { + width: '533px', + height: '801px' + } + } +}; + +addViewports(newViewports); +``` + +This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices + +## Use Completely New Set of Devices -#### How can I make a custom screen size? +You can replace the entire devices with your own set by simply calling `setViewports` in `config.js` file. + +```js +import { setViewports } from '@storybook/addon-viewport'; + +const newViewports = { + kindleFire2: { + name: 'Kindle Fire 2', + styles: { + width: '600px', + height: '963px' + } + }, + kindleFireHD: { + name: 'Kindle Fire HD', + styles: { + width: '533px', + height: '801px' + } + } +}; + +setViewports(newViewports); +``` -Unfortunately, this is currently not supported. +This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD`