UseOS

1import { useMemo } from 'react';
2 
3export enum OS {
4  Undetermined = 'undetermined',
5  MacOS = 'macos',
6  IOS = 'ios',
7  Windows = 'windows',
8  Android = 'android',
9  Linux = 'linux',
10}
11 
12const macosPattern = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i;
13const iosPattern = /(iPhone)|(iPad)|(iPod)/i;
14const windowsPattern = /(Win32)|(Win64)|(Windows)|(WinCE)|(Windows)/i;
15const androidPattern = /Android/i;
16const linuxPattern = /Linux/i;
17 
18function detectOS(userAgent: string): OS {
19  if (
20    iosPattern.test(userAgent) ||
21    (macosPattern.test(userAgent) &&
22      typeof document !== 'undefined' &&
23      'ontouchend' in document)
24  ) {
25    return OS.IOS;
26  }
27  if (macosPattern.test(userAgent)) {
28    return OS.MacOS;
29  }
30  if (windowsPattern.test(userAgent)) {
31    return OS.Windows;
32  }
33  if (androidPattern.test(userAgent)) {
34    return OS.Android;
35  }
36  if (linuxPattern.test(userAgent)) {
37    return OS.Linux;
38  }
39  return OS.Undetermined;
40}
41 
42export function useOS(): OS {
43  return useMemo(() => {
44    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
45      return OS.Undetermined;
46    }
47    return detectOS(navigator.userAgent);
48  }, []);
49}