New
I18n with StorybookAutomate with Chromatic
Star74,211
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
UserAgent
storybook-addon-useragent
npm install storybook-addon-useragent
Last updated 27 days ago
247
Downloads per week
Readme View on GitHub

UserAgent Storybook Addon

npm version npm package yearly downloads License Demo

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

name version info
React 16 ~ 17 ✅ fully supported
React 18 🚧 React 18 warning display, no functional issues
Storybook 5.3.x ✅ fully supported
Storybook 5.5.x ✅ 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 { Button } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    myAddonParameter: `
<MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>
  <SomeOtherComponent funcProp={(a) => a.id} />
</MyComponent>
`,
  },
};

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

export const IOS = Template.bind({});
IOS.args = {
  activeUserAgent:
    "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",
};
Join the community
5,789 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI