storybook-addon-user-agent

這個 Storybook 的擴充套件可讓您使用不同的使用者代理檢視您的元件渲染。

開始使用

首先，安裝擴充套件

yarn add -D storybook-addon-user-agent

註冊擴充套件

// addons.js
import 'storybook-addon-user-agent/dist/register';

完成！

與 bowser 搭配使用

有時我們在專案中使用 bowser 進行瀏覽器偵測，這依賴於使用者代理識別。由於我們希望在選擇新的使用者代理後，bowser 立即重新解析目前的使用者代理（這在目前的 bowser 主要版本 v1.x 中可能無法運作，而且看起來會在 v2 中出現。我不太確定，如果我遺漏了什麼，請更新我 🙏）。
在這種情況下，您可以使用我們在此提供的 bowser 模組。事實上，它只是一個擴展原始 bowser 的模組，用於檢測您是否在 storybook 中工作，如果是，它將在每次執行時解析 user-agent，如果不是，那麼它將像往常一樣工作。

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

// usage is same as usual
// bowser.mobile, ...