useOs

Detect the user's operating system for adaptive UI experiences.

System Detection

OS Identifier

Detect the user's operating system for adaptive experiences.

❓

Undetermined

Adaptive Keyboard Hint

Ctrl+K

Usage

import { useOs } from 'usehooks-ts'
 
export default function App() {
  const os = useOs()
 
  return (
    <div>
      <p>Detected OS: {os}</p>
      {os === 'macos' ? <span>Press ⌘+K</span> : <span>Press Ctrl+K</span>}
    </div>
  )
}

API

const os = useOs()

Return Values

Name	Type	Description
`os`	`'macos' \| 'windows' \| 'linux' \| 'ios' \| 'android' \| 'undetermined'`	Detected OS

Hook

import { useMemo } from 'react'
 
export type OS = 'macos' | 'windows' | 'linux' | 'ios' | 'android' | 'undetermined'
 
export function useOs(): OS {
  return useMemo(() => {
    if (typeof window === 'undefined') return 'undetermined'
 
    const userAgent = window.navigator.userAgent.toLowerCase()
 
    if (userAgent.indexOf('win') !== -1) return 'windows'
    if (userAgent.indexOf('mac') !== -1) {
      if ('ontouchend' in document) return 'ios'
      return 'macos'
    }
    if (userAgent.indexOf('linux') !== -1) return 'linux'
    if (/android/.test(userAgent)) return 'android'
    if (/iphone|ipad|ipod/.test(userAgent)) return 'ios'
 
    return 'undetermined'
  }, [])
}