Nesting Penguins Molt

    storybook-addon-useragent
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

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

    Install

    npm i storybook-addon-useragent

    DownloadsWeekly Downloads

    276

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    63 kB

    Total Files

    50

    Last publish

    Collaborators

    • sotaneum