storybook-addon-useragent

UserAgent Storybook Addon

Features

• Screens displayed differently depending on UserAgent can also be configured in Storybook.
• Beyond simply analyzing whether or not mobile is based on the screen size, the page itself can be recognized as mobile.
• You can use it without installing additional libraries.

Support

Storybook Version	Addon Version
v8	npm i -D storybook-addon-useragent@8
v7	npm i -D storybook-addon-useragent@7
v6	npm i -D storybook-addon-useragent@6

Installing and Setup

npm:

npm i storybook-addon-useragent -D

yarn:

yarn add storybook-addon-useragent -D

Add it to addons in .storybook/main.js.

module.exports = {
  ...
  addons: [..., "storybook-addon-useragent"],
  ...
};

Usage

Customize list

You can change the list item to any data you want.

.storybook/userAgent.js

export const customUserAgents = [
  {
    name: "Windows_7-IE_11",
    userAgent:
      "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko",
  },
];

.storybook/preview.js

import { customUserAgents } from "./userAgent";

export const parameters = {
  ...
  userAgent: customUserAgents,
};

Set as default in stories

You can specify a default UserAgent value for story.

Items not in the list can also be specified.

import React from "react";
import { UserAgentExample } from "./UserAgentExample";

export default {
  title: "Example/UserAgentExample",
  component: UserAgentExample,
  argTypes: {
    useragent: { control: "text" },
  },
};

const Template = (args) => <UserAgentExample {...args} />;

export const IOS = Template.bind({});
IOS.args = {
  useragent:
    "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1",
};