Security News
TC39 Advances 10+ ECMAScript Proposals: Key Features to Watch
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
@storybook/addon-viewport
Advanced tools
Storybook addon to change the viewport size to mobile
The @storybook/addon-viewport package allows developers to customize the viewport size to simulate different screen sizes in Storybook's UI. This is particularly useful for ensuring that components and layouts are responsive and look good on various devices, from mobile phones to desktop monitors.
Custom Viewport Configuration
This code configures Storybook to use a set of predefined viewports. The INITIAL_VIEWPORTS constant provides a list of common device resolutions that can be used to test the responsiveness of components.
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
export const parameters = {
viewport: {
viewports: INITIAL_VIEWPORTS,
},
};
Adding New Viewports
Developers can add custom viewports to the Storybook configuration. This code sample demonstrates how to add new devices, such as Kindle Fire 2 and Kindle Fire HD, with specific resolutions to the viewport addon.
export const parameters = {
viewport: {
viewports: {
kindleFire2: {
name: 'Kindle Fire 2',
styles: {
width: '600px',
height: '963px',
},
},
kindleFireHD: {
name: 'Kindle Fire HD',
styles: {
width: '533px',
height: '801px',
},
},
},
},
};
This package provides device detection for React applications. It offers hooks and components to conditionally render UI elements based on the device. Unlike @storybook/addon-viewport, it does not integrate with Storybook but can be used within the app's codebase to adapt the UI for different devices.
React-responsive is a package that allows the creation of media queries in React components. It is similar to @storybook/addon-viewport in that it helps in building responsive UIs, but it does so within the context of the app rather than in a Storybook environment.
Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of Storybook.
This addon works with Storybook for: React and Vue.
Install the following npm module:
npm i --save-dev @storybook/addon-viewport
or with yarn:
yarn add -D @storybook/addon-viewport
Simply import the Storybook Viewport Addon in the addons.js
file in your .storybook
directory.
import '@storybook/addon-viewport/register'
This will register the Viewport Addon to Storybook and will show up in the action area.
Unfortunately, this is currently not supported.
Unfortunately, this is currently not supported.
FAQs
Build responsive components by adjusting Storybook’s viewport size and orientation
The npm package @storybook/addon-viewport receives a total of 3,096,767 weekly downloads. As such, @storybook/addon-viewport popularity was classified as popular.
We found that @storybook/addon-viewport demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.
Security News
A senior white house official is urging insurers to stop covering ransomware payments, indicating possible stricter regulations to deter cybercrime.