Installation

Props

This hook does not accept any props.

Data

This hook returns a string that represents the user's operating system.

The possible values are: macos, ios, windows, android, linux, and undetermined.

Key Features & Details

Detection Logic

• The hook uses the browser's navigator.userAgent to detect the operating system.
• It distinguishes between macOS and iOS by checking for touch support on Mac devices.
• Returns one of: macos, ios, windows, android, linux, or undetermined.

SSR & Initial Value

• On the server, or if window/navigator is not available, the hook returns undetermined.

Enum Return Type

• The hook returns a value from the OS enum, not just a string. You can import and use the OS enum for type safety.

Best Practices & Caveats

• The hook is client-side only; on the server, it cannot detect the OS.
• User agent sniffing is not 100% reliable and may not detect all edge cases or future OSes.
• For best performance, use the hook at the top level of your component and avoid unnecessary re-renders.

Examples

Basic Usage

const os = useOS();
if (os === 'macos') {
  // Show Mac-specific UI
}

With Enum

import { OS, useOS } from '@/registry/hooks/use-os';
 
const os = useOS();
if (os === OS.Windows) {
  // Show Windows-specific UI
}