useDeviceOS

A hook to detect the user's operating system, browser, device type, and touch capability.

The useDeviceOS hook detects the current device's OS, browser, form factor, and touch support from the user agent string. It's SSR-safe and resolves on mount.

Demo

Source Code

Copy this code into src/hooks/useDeviceOS.ts:

import { useEffect, useState } from 'react';

export type OSName = 'Windows' | 'macOS' | 'Linux' | 'Android' | 'iOS' | 'ChromeOS' | 'Unknown';
export type BrowserName =
  | 'Chrome'
  | 'Firefox'
  | 'Safari'
  | 'Edge'
  | 'Opera'
  | 'Samsung Internet'
  | 'Unknown';
export type DeviceType = 'mobile' | 'tablet' | 'desktop';

export interface DeviceOSInfo {
  os: OSName;
  browser: BrowserName;
  deviceType: DeviceType;
  isTouchDevice: boolean;
  userAgent: string;
  isReady: boolean;
}

export const useDeviceOS = (): DeviceOSInfo => {
  const [info, setInfo] = useState<DeviceOSInfo>({
    os: 'Unknown',
    browser: 'Unknown',
    deviceType: 'desktop',
    isTouchDevice: false,
    userAgent: '',
    isReady: false,
  });

  useEffect(() => {
    const ua = navigator.userAgent;
    setInfo({
      os: detectOS(ua),
      browser: detectBrowser(ua),
      deviceType: detectDeviceType(ua),
      isTouchDevice: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
      userAgent: ua,
      isReady: true,
    });
  }, []);

  return info;
};

Usage

import { useDeviceOS } from '@/hooks/useDeviceOS';

const PlatformMessage = () => {
  const { os, browser, deviceType, isReady } = useDeviceOS();

  if (!isReady) return null;

  return (
    <p>
      You are on {os} using {browser} ({deviceType})
    </p>
  );
};

API Reference

Return Value

Property	Type	Description
`os`	`OSName`	`"Windows"` \| `"macOS"` \| `"Linux"` \| `"Android"` \| `"iOS"` \| `"ChromeOS"` \| `"Unknown"`
`browser`	`BrowserName`	`"Chrome"` \| `"Firefox"` \| `"Safari"` \| `"Edge"` \| `"Opera"` \| `"Samsung Internet"` \| `"Unknown"`
`deviceType`	`DeviceType`	`"mobile"` \| `"tablet"` \| `"desktop"`
`isTouchDevice`	`boolean`	Whether the device has touch capability
`userAgent`	`string`	Raw user agent string
`isReady`	`boolean`	`true` after client-side detection completes