https://github.com/sotaneum/storybook-addon-useragent

storybook-addon-useragent
https://github.com/sotaneum/storybook-addon-useragent

addon storybook storybook-addon useragent

Last synced: 7 days ago
JSON representation

storybook-addon-useragent

• Host: GitHub
• URL: https://github.com/sotaneum/storybook-addon-useragent
• Owner: Sotaneum
• License: mit
• Created: 2021-10-18T12:07:31.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-29T15:47:27.000Z (11 months ago)
• Last Synced: 2025-01-27T08:38:02.360Z (13 days ago)
• Topics: addon, storybook, storybook-addon, useragent
• Language: TypeScript
• Homepage: https://sotaneum.github.io/storybook-addon-useragent/
• Size: 6.93 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  



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:

```sh

npm i storybook-addon-useragent -D

```

yarn:

```sh

yarn add storybook-addon-useragent -D

```

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

```js

module.exports = {

  ...

  addons: [..., "storybook-addon-useragent"],

  ...

};

```

## Usage

### Customize list

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

`.storybook/userAgent.js`

```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`

```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.

```js

import React from "react";

import { UserAgentExample } from "./UserAgentExample";

export default {

  title: "Example/UserAgentExample",

  component: UserAgentExample,

  argTypes: {

    useragent: { control: "text" },

  },

};

const Template = (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",

};

```