UA-Kit

React User Agent 组件库 — 智能设备检测与条件渲染

特性

• 精准解析 — 浏览器、操作系统、设备类型、渲染引擎、CPU架构
• 零依赖 — 纯函数解析引擎，仅依赖 React
• SSR 友好 — 支持服务端渲染，可注入 UA 字符串和屏幕尺寸
• 多格式输出 — ESM / CJS / UMD，完整 TypeScript 类型声明
• 调试面板 — 内置 UADebugPanel 开发调试工具

安装

npm install ua-kit

快速开始

import { UAProvider, useUA, DeviceDetector, BrowserBadge } from 'ua-kit';

function App() {
  return (
    <UAProvider>
      <MyApp />
    </UAProvider>
  );
}

function MyApp() {
  const { browser, os, device, isWechat } = useUA();

  return (
    <div>
      <BrowserBadge showVersion />
      <DeviceDetector
        mobile={<MobileNav />}
        tablet={<TabletNav />}
        desktop={<DesktopNav />}
      />
    </div>
  );
}

核心 API

UAProvider

全局 UA 上下文提供者，在应用根节点包裹一次即可。

<UAProvider userAgent={req.headers['user-agent']}>
  <App />
</UAProvider>

支持 SSR 注入 userAgent、screenWidth、screenHeight、devicePixelRatio。

useUA

获取当前 UA 解析结果。

const { browser, os, device, engine, cpu, isWechat, isApp, isTouch, isHover } = useUA();

parseUA

纯函数解析，不依赖 React。

import { parseUA } from 'ua-kit';

const info = parseUA('Mozilla/5.0...');
// { browser, os, device, engine, cpu, isWechat, isApp }

UADetectors

快速检测工具集。

import { UADetectors } from 'ua-kit';

UADetectors.isMobile();
UADetectors.isWechat();
UADetectors.isBrowser('Chrome', 90);

组件

DeviceDetector

根据设备类型条件渲染。

<DeviceDetector
  mobile={<MobileView />}
  tablet={<TabletView />}
  desktop={<DesktopView />}
  match={ua => ua.isWechat}  // 自定义匹配
/>

BrowserDetector / OSDetector

浏览器/操作系统条件渲染。

<BrowserDetector name="Chrome" minVersion={90}>
  <ModernFeature />
</BrowserDetector>

<OSDetector name={['iOS', 'Android']}>
  <MobilePay />
</OSDetector>

BrowserBadge / OSBadge / DeviceBadge

自动识别并展示彩色标识徽章。

<BrowserBadge showVersion size="large" />
<OSBadge showVersion />
<DeviceBadge />

ResponsiveGuard

结合 UA 和窗口尺寸的响应式守卫。

<ResponsiveGuard
  mobile={<MobileLayout />}
  tablet={<TabletLayout />}
  desktop={<DesktopLayout />}
  uaFirst={false}  // 是否优先使用UA而非窗口尺寸
/>

UADebugPanel

开发调试面板，展示完整 UA 解析信息。

{process.env.NODE_ENV === 'development' && <UADebugPanel />}

构建产物

| 格式 | 路径 | 用途 | |------|------|------| | ESM | dist/esm/index.js | 现代打包工具 | | CJS | dist/cjs/index.js | Node.js / 旧版工具 | | UMD | dist/umd/ua-kit.min.js | 浏览器直接引入 | | Types | dist/types/index.d.ts | TypeScript 类型 |

License

MIT