mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 18:41:06 +08:00
30 lines
1.1 KiB
Markdown
30 lines
1.1 KiB
Markdown
# Storybook Viewport Addon
|
|
|
|
Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
|
|
|
|
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
Viewport is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
|
|
|
```sh
|
|
npm i -D @storybook/addon-viewport
|
|
```
|
|
|
|
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
|
|
|
```js
|
|
module.exports = {
|
|
addons: ['@storybook/addon-viewport'],
|
|
};
|
|
```
|
|
|
|
You should now be able to see the viewport addon icon in the the toolbar at the top of the screen.
|
|
|
|
## Usage
|
|
|
|
The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/viewport).
|