Examples

Device Redirect

Redirect users to the appropriate version based on device type:

import uaBrowser from 'ua-browser'

const { device } = uaBrowser()

if (device === 'Mobile' || device === 'Tablet') {
  window.location.href = 'https://m.example.com'
}

---

Block Bot Requests

Filter crawler traffic in server-side middleware:

import { parseUA } from 'ua-browser'

// Express / Koa middleware
function blockBots(req, res, next) {
  const ua = req.headers['user-agent'] ?? ''
  const { isBot, botName } = parseUA(ua)

  if (isBot) {
    console.log(`Bot blocked: ${botName}`)
    return res.status(403).end()
  }

  next()
}

---

Block Headless Browsers

Prevent automated script access:

import uaBrowser from 'ua-browser'

const { isHeadless, isBot } = uaBrowser()

if (isHeadless || isBot) {
  document.body.innerHTML = 'Access denied.'
}

---

Load Browser-specific Polyfills

Load polyfills or fallbacks for specific browsers:

import uaBrowser from 'ua-browser'

const { browser, version } = uaBrowser()

if (browser === 'IE') {
  await import('./polyfills/ie.js')
} else if (browser === 'Safari' && parseInt(version) < 14) {
  await import('./polyfills/safari-legacy.js')
}

---

SSR / Node.js — Parse Request UA

Return differentiated content based on UA in server-side rendering:

import { parseUA } from 'ua-browser'

// Next.js / Nuxt SSR
export async function getServerSideProps({ req }) {
  const ua = req.headers['user-agent'] ?? ''
  const { device, os, browser } = parseUA(ua)

  return {
    props: {
      isMobile: device === 'Mobile',
      isIOS: os === 'iOS',
      isWeChat: browser === 'Wechat',
    },
  }
}

---

Accurate Windows 10 / 11 Detection

Windows 10 and 11 share the same UA string. Use navigator.userAgentData to distinguish them:

import { parseUA, getWindowsVersion, getNavContext } from 'ua-browser'

const nav = getNavContext()
const windowsVersion = await getWindowsVersion(nav)
const { os, osVersion } = parseUA(navigator.userAgent, { nav, windowsVersion })

console.log(os)        // 'Windows'
console.log(osVersion) // '11' or '10'

---

Vue Composable

// composables/useBrowser.ts
import { ref, onMounted } from 'vue'
import uaBrowser from 'ua-browser'
import type { EnvOption } from 'ua-browser'

export function useBrowser() {
  const info = ref<EnvOption | null>(null)

  onMounted(() => {
    info.value = uaBrowser()
  })

  return { info }
}

<script setup lang="ts">
import { useBrowser } from '@/composables/useBrowser'

const { info } = useBrowser()
</script>

<template>
  <div v-if="info">
    {{ info.browser }} {{ info.version }} on {{ info.os }}
  </div>
</template>

---

React Hook

// hooks/useBrowser.ts
import { useState, useEffect } from 'react'
import uaBrowser from 'ua-browser'
import type { EnvOption } from 'ua-browser'

export function useBrowser(): EnvOption | null {
  const [info, setInfo] = useState<EnvOption | null>(null)

  useEffect(() => {
    setInfo(uaBrowser())
  }, [])

  return info
}

import { useBrowser } from '@/hooks/useBrowser'

export function BrowserInfo() {
  const info = useBrowser()
  if (!info) return null

  return (
    <p>{info.browser} {info.version} on {info.os}</p>
  )
}

---

High-Accuracy Architecture Detection (getEnvContext)

Collect WebGL renderer, Client Hints, and other signals to distinguish Apple Silicon from Intel Mac:

import { getEnvContext, parseUA } from 'ua-browser'

const ctx = await getEnvContext()
const result = parseUA(navigator.userAgent, { ctx })

console.log(result.arch) // 'arm64' (Apple Silicon) or 'x86_64'

---

SSR Precise Detection (parseHeaders + Client Hints)

Use HTTP Client Hints for accurate detection in Express / Next.js and similar server-side frameworks:

import { parseHeaders, ACCEPT_CH } from 'ua-browser'

// First response: tell the browser to send Client Hints
app.use((req, res, next) => {
  res.setHeader('Accept-CH', ACCEPT_CH)
  next()
})

// Subsequent requests: precise arch / OS detection
app.get('/api/info', (req, res) => {
  const result = parseHeaders(req.headers)
  res.json({
    browser: result.browser,
    os:      result.os,
    arch:    result.arch, // 'x86_64' (from Sec-CH-UA-Arch)
  })
})

---

Use Standalone Detectors

Import only the detector you need to minimize bundle size:

import { detectArch } from 'ua-browser'

const arch = detectArch(navigator.userAgent)
// 'x86_64' | 'arm64' | 'arm' | 'x86' | 'unknown'

if (arch === 'arm64') {
  console.log('Apple Silicon / ARM device')
}

---

Analytics Reporting

Collect and report user environment data:

import uaBrowser from 'ua-browser'

const { browser, version, os, device, arch } = uaBrowser()

fetch('/api/analytics', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ browser, version, os, device, arch }),
})