https://github.com/jasperck/storybook-addon-user-agent

Addon to provide a user-agent switcher for storybook
https://github.com/jasperck/storybook-addon-user-agent

react storybook storybooks user-agent userscript

Last synced: 4 months ago
JSON representation

Addon to provide a user-agent switcher for storybook

• Host: GitHub
• URL: https://github.com/jasperck/storybook-addon-user-agent
• Owner: jasperck
• License: mit
• Created: 2018-12-28T03:54:21.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-18T08:17:43.000Z (almost 6 years ago)
• Last Synced: 2024-09-30T22:42:19.214Z (4 months ago)
• Topics: react, storybook, storybooks, user-agent, userscript
• Language: JavaScript
• Size: 191 KB
• Stars: 4
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# storybook-addon-user-agent

This addon for storybook will allow you to view your component rendering with different user-agent.

![ua-switcher-screenshot](doc/ua-switcher-screenshot.png)

## Getting Started

First, install the addon

```

yarn add -D storybook-addon-user-agent

```

Register the addon

```js

// addons.js

import 'storybook-addon-user-agent/dist/register';

```

Done!

## Work with **bowser**

Sometimes we use [**bowser**](https://github.com/lancedikson/bowser) in our project for browser detection which depends on user-agent identification. Since we want **bowser** re-parse current user-agent right after we select new user-agent (which might not be workable in current major version v1.x of bowser, and looks like it will come with v2. I'm not sure for it, please update me if I'm missing something here 🙏).  

In this case, you can use the bowser module we provided here. In fact, it just a module extended the origin **bowser** with detecting whether you are working in `storybook` or not, if so, it'll parse **user-agent** every execution, if not, then it will just work as usual.

```js

// change

import bowser from 'bowser';

// to

import bowser from 'storybook-addon-user-agent/bowser';

// usage is same as usual

// bowser.mobile, ...

```