@storybook/addon-viewport

What is @storybook/addon-viewport?

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.

What are @storybook/addon-viewport's main functionalities?

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',
        },
      },
    },
  },
};

Other packages similar to @storybook/addon-viewport

react-device-detect

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

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.

README

The README file is missing

Changelog

9.0.4

• Addon Vitest: Fix path comparison on Windows - #31630, thanks @valentinpalkovic!
• Addon Vitest: Fix path comparison on Windows - #31634, thanks @valentinpalkovic!