storybook-addon-useragent v8.0.0
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
v7
name | version | info |
---|---|---|
React | <= 18 | ✅ fully supported |
Storybook | >= 7.0.0 | ✅ fully supported |
Storybook | < 7.0.0 | ❌ using v6 |
v6
name | version | info |
---|---|---|
React | <= 18 | ✅ fully supported |
Storybook | >= 7.0.0 | ❌ using v7 |
Storybook | < 7.0.0 | ✅ fully supported |
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",
};
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago