How to customize the viewport in the Storybook
Tags: javascript, storybook, react
Published: 2023-06-11 10:50:16

This blog talks about customizing the storybook viewports and making testing UI elements easier.

While creating UI elements on the storybook we might have to test UI elements according to the breakpoints we have defined in our project. This blog post provides a guide on how to add customized viewports in Storybook.

By default, Storybook uses a [minimal set of viewports](https://github.com/storybookjs/storybook/blob/next/code/addons/viewport/src/defaults.ts#L167) to get us started. But we are not restricted to these. The addon offers a more granular list of devices. We can also define our viewports customized to breakpoints in the project.

I have created a storybook for my React + TS + MUI project. There are default viewports in this storybook now.

![Default viewports](https://miro.medium.com/v2/resize:fit:720/format:webp/1*q6P0Fk9AgS2a8B-vRyH6Sg.png)

I need to have a variety of devices listed to properly test my components. Let’s delve into the use of addons to establish different viewports, which can be accomplished by modifying `preview.js`.

Let’s import INITIAL_VIEWPORTS in my `preview.js` and feed it to viewports in the parameters.

```javascript
//.storybook/preview.js

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';



export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}
```

We can see more devices now. Very helpful to test UI on the spot.

![Storybook with Initial viewports](https://miro.medium.com/v2/resize:fit:720/format:webp/1*zBVngUfVxXRncqdfyb1AmQ.png)

Let’s define custom viewports now.

Let’s define the viewports to match the breakpoints that have been defined in the project.

```javascript
   xs: 350,
        sm: 600,
        md: 900,
        lg: 1200,
        xl: 1536,

//  breakpoints from my project
```
Let’s define the below array in my preview.js. And add that to the viewports in the parameters.

```javascript
const customViewports = {
  xs: {
    name: 'XS',
    styles: {
      width: '350px',
      height: '963px',
    },
  },
  sm: {
    name: 'SM',
    styles: {
      width: '600px',
      height: '801px',
    },
  },
  md: {
    name: 'MD',
    styles: {
      width: '900px',
      height: '801px',
    },
  },
  lg: {
    name: 'LG',
    styles: {
      width: '1200px',
      height: '801px',
    },
  },
  xl: {
    name: 'XL',
    styles: {
      width: '1536px',
      height: '801px',
    },
  },
};
```
This is how my `preview.js` looks.

```javascript

const customViewports = {
  xs: {
    name: 'XS',
    styles: {
      width: '350px',
      height: '963px',
    },
  },
  sm: {
    name: 'SM',
    styles: {
      width: '600px',
      height: '801px',
    },
  },
  md: {
    name: 'MD',
    styles: {
      width: '900px',
      height: '801px',
    },
  },
  lg: {
    name: 'LG',
    styles: {
      width: '1200px',
      height: '801px',
    },
  },
  xl: {
    name: 'XL',
    styles: {
      width: '1536px',
      height: '801px',
    },
  },
};

export const parameters = {
  viewport: {
    viewports: customViewports,
  },
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}
```
You can see your custom sizes in the storybook.

![Storybook with customized viewports](https://miro.medium.com/v2/resize:fit:720/format:webp/1*JIbfsHjmGZasyem_6FoCwA.png)

If you want both INITIAL_VIEWPORTS and customViewports in your storybook, simply do this.

```javascript
     viewports: {
        ...MINIMAL_VIEWPORTS,
        ...customViewports,
      },
```

And that sums it up. You can find the link to the [repository](https://github.com/Sanchithasharma/storybook-react-ts/tree/viewport-storybook) here. Comment below if it helped you!!