Device & Environment

/**
 * Detect operating system
 * @param options - Configuration for detection timing
 * @returns Operating system identifier
 */
function useOs(options?: UseOsOptions): UseOSReturnValue;

interface UseOsOptions {
  getValueInEffect?: boolean;
}

type UseOSReturnValue = 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux';

import { useOs } from "@mantine/hooks";

function PlatformSpecificComponent() {
  const os = useOs();
  
  const getShortcut = () => {
    switch (os) {
      case 'macos':
      case 'ios':
        return 'Cmd+S';
      case 'windows':
      case 'linux':
      case 'android':
        return 'Ctrl+S';
      default:
        return 'Ctrl+S or Cmd+S';
    }
  };
  
  return (
    <div>
      <p>Your OS: {os}</p>
      <p>Save shortcut: {getShortcut()}</p>
      {(os === 'ios' || os === 'android') && (
        <MobileSpecificComponent />
      )}
    </div>
  );
}

/**
 * Device orientation detection
 * @param options - Configuration for orientation tracking
 * @returns Object with angle and orientation type
 */
function useOrientation(options?: UseOrientationOptions): UseOrientationReturnType;

interface UseOrientationOptions {
  angle?: number;
  type?: OrientationType;
}

interface UseOrientationReturnType {
  angle: number;
  type: OrientationType;
}

/**
 * Detect reduced motion preference
 * @param initialValue - Initial value for SSR
 * @param options - Configuration for effect timing
 * @returns Boolean indicating if user prefers reduced motion
 */
function useReducedMotion(
  initialValue?: boolean, 
  options?: { getInitialValueInEffect?: boolean }
): boolean;

import { useReducedMotion } from "@mantine/hooks";

function AnimatedComponent() {
  const shouldReduceMotion = useReducedMotion();
  
  return (
    <div
      style={{
        transform: 'translateX(0)',
        transition: shouldReduceMotion ? 'none' : 'transform 0.3s ease',
      }}
      className={shouldReduceMotion ? 'no-animation' : 'with-animation'}
    >
      Content with respect for motion preferences
    </div>
  );
}

/**
 * Detect user idle state
 * @param timeout - Idle timeout in milliseconds
 * @param options - Configuration for idle detection
 * @returns Boolean indicating if user is idle
 */
function useIdle(timeout: number, options?: UseIdleOptions): boolean;

interface UseIdleOptions {
  events?: string[];
  initialState?: boolean;
}

import { useIdle } from "@mantine/hooks";

function IdleDetector() {
  const idle = useIdle(5000, {
    events: ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'],
    initialState: false,
  });
  
  return (
    <div>
      <p>User is: {idle ? 'Idle' : 'Active'}</p>
      {idle && <div>You've been idle for 5 seconds</div>}
    </div>
  );
}

// Auto-save when user goes idle
function AutoSaveEditor() {
  const [content, setContent] = useState('');
  const [lastSaved, setLastSaved] = useState<Date | null>(null);
  const idle = useIdle(3000);
  
  useEffect(() => {
    if (idle && content !== lastSavedContent) {
      autoSave(content);
      setLastSaved(new Date());
    }
  }, [idle, content]);
  
  return (
    <div>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      {lastSaved && (
        <p>Last saved: {lastSaved.toLocaleTimeString()}</p>
      )}
    </div>
  );
}