use-os

1import { useEffect, useState } from 'react'
2 
3export type UseOSReturnValue =
4  | 'undetermined'
5  | 'macos'
6  | 'ios'
7  | 'windows'
8  | 'android'
9  | 'linux'
10  | 'chromeos'
11 
12export interface UseOsOptions {
13  /**
14   * Defer browser OS detection until after mount to avoid server/client mismatches.
15   * @default true
16   */
17  getValueInEffect?: boolean
18}
19 
20interface NavigatorWithUserAgentData extends Navigator {
21  userAgentData?: {
22    platform?: string
23  }
24}
25 
26function getPlatform(): string {
27  if (typeof navigator === 'undefined') {
28    return ''
29  }
30 
31  const nav = navigator as NavigatorWithUserAgentData
32 
33  return (nav.userAgentData?.platform ?? navigator.platform ?? '').toLowerCase()
34}
35 
36function getUserAgent(): string {
37  if (typeof navigator === 'undefined') {
38    return ''
39  }
40 
41  return navigator.userAgent.toLowerCase()
42}
43 
44/**
45 * Detect the current operating system from the browser environment.
46 *
47 * @param options Hook options.
48 * @returns The detected operating system or `undetermined`.
49 */
50export function getOS(options: UseOsOptions = {}): UseOSReturnValue {
51  const { getValueInEffect = true } = options
52 
53  if (getValueInEffect || typeof navigator === 'undefined') {
54    return 'undetermined'
55  }
56 
57  const platform = getPlatform()
58  const userAgent = getUserAgent()
59  const maxTouchPoints = navigator.maxTouchPoints ?? 0
60 
61  if (userAgent.includes('android')) {
62    return 'android'
63  }
64 
65  if (
66    /iphone|ipad|ipod/.test(userAgent) ||
67    (platform === 'macintel' && maxTouchPoints > 1)
68  ) {
69    return 'ios'
70  }
71 
72  if (userAgent.includes('cros')) {
73    return 'chromeos'
74  }
75 
76  if (platform.includes('win') || userAgent.includes('win')) {
77    return 'windows'
78  }
79 
80  if (platform.includes('mac') || userAgent.includes('mac')) {
81    return 'macos'
82  }
83 
84  if (platform.includes('linux') || userAgent.includes('linux')) {
85    return 'linux'
86  }
87 
88  return 'undetermined'
89}
90 
91/**
92 * Reactively detect the current operating system from `navigator.userAgent`.
93 *
94 * @param options Hook options.
95 * @returns The detected operating system or `undetermined`.
96 */
97export function useOs(options: UseOsOptions = {}): UseOSReturnValue {
98  const { getValueInEffect = true } = options
99  const [os, setOs] = useState<UseOSReturnValue>(() =>
100    getOS({ getValueInEffect }),
101  )
102 
103  useEffect(() => {
104    setOs(getOS({ getValueInEffect: false }))
105  }, [getValueInEffect])
106 
107  return os
108}