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