useOs

import { useOs } from '@kuzenbo/hooks';

function Demo() {
  const os = useOs();

  return (
    <div>
      Detected OS: {os}
    </div>
  );
}

function useOs(options?: UseOsOptions): UseOSReturnValue

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

import { useOs } from '@kuzenbo/hooks';

function KeyboardShortcuts() {
  const os = useOs();

  const modifierKey = os === 'macos' || os === 'ios' ? '⌘' : 'Ctrl';

  return (
    <div>
      <h3>Keyboard Shortcuts</h3>
      <p>Save: {modifierKey} + S</p>
      <p>Copy: {modifierKey} + C</p>
      <p>Paste: {modifierKey} + V</p>
    </div>
  );
}

import { useOs } from '@kuzenbo/hooks';

function DownloadButton() {
  const os = useOs();

  const downloadLinks = {
    macos: '/downloads/app-macos.dmg',
    windows: '/downloads/app-windows.exe',
    linux: '/downloads/app-linux.AppImage',
    ios: 'https://apps.apple.com/app/myapp',
    android: 'https://play.google.com/store/apps/myapp',
    chromeos: '/downloads/app-chrome.crx',
    undetermined: '/downloads',
  };

  const downloadUrl = downloadLinks[os];

  return (
    <a href={downloadUrl} download>
      Download for {os}
    </a>
  );
}

import { useOs } from '@kuzenbo/hooks';

function AppFeatures() {
  const os = useOs();

  const isMobile = os === 'ios' || os === 'android';

  return (
    <div>
      <h2>Features</h2>
      <ul>
        <li>Cloud Sync</li>
        <li>Offline Mode</li>
        {!isMobile && <li>Desktop Notifications</li>}
        {isMobile && <li>Touch Gestures</li>}
        {os === 'macos' && <li>Touch Bar Support</li>}
      </ul>
    </div>
  );
}

import { useOs } from '@kuzenbo/hooks';

function OSBadge() {
  const os = useOs();

  const osIcons = {
    macos: '🍎',
    ios: '📱',
    windows: '🪟',
    android: '🤖',
    linux: '🐧',
    chromeos: '💻',
    undetermined: '❓',
  };

  const osLabels = {
    macos: 'macOS',
    ios: 'iOS',
    windows: 'Windows',
    android: 'Android',
    linux: 'Linux',
    chromeos: 'Chrome OS',
    undetermined: 'Unknown',
  };

  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: '8px',
        padding: '4px 12px',
        background: '#f3f4f6',
        borderRadius: '16px',
      }}
    >
      <span>{osIcons[os]}</span>
      <span>{osLabels[os]}</span>
    </div>
  );
}

import { useOs } from '@kuzenbo/hooks';
import { useClipboard } from '@kuzenbo/hooks';

function InstallInstructions() {
  const os = useOs();
  const clipboard = useClipboard();

  const commands = {
    macos: 'brew install myapp',
    windows: 'winget install myapp',
    linux: 'sudo apt install myapp',
    chromeos: 'Not available for Chrome OS',
    ios: 'Install from App Store',
    android: 'Install from Play Store',
    undetermined: 'npm install -g myapp',
  };

  const command = commands[os];

  return (
    <div>
      <code>{command}</code>
      <button onClick={() => clipboard.copy(command)}>
        {clipboard.copied ? 'Copied!' : 'Copy'}
      </button>
    </div>
  );
}

import { useOs } from '@kuzenbo/hooks';

function PlatformSupport() {
  const os = useOs();

  const supportedPlatforms = ['macos', 'windows', 'linux'];
  const isSupported = supportedPlatforms.includes(os);

  return (
    <div>
      {isSupported ? (
        <p>✅ Your platform ({os}) is fully supported!</p>
      ) : (
        <p>⚠️ Limited support for {os}. Desktop platforms recommended.</p>
      )}
    </div>
  );
}

import { useOs } from '@kuzenbo/hooks';

function SSRSafeComponent() {
  const os = useOs({ getValueInEffect: true });

  if (os === 'undetermined') {
    return <div>Detecting your platform...</div>;
  }

  return <div>Platform: {os}</div>;
}

import { useOs } from '@kuzenbo/hooks';
import { useEffect } from 'react';

function AnalyticsTracker() {
  const os = useOs();

  useEffect(() => {
    if (os !== 'undetermined') {
      // Send OS info to analytics
      analytics.track('page_view', { os });
    }
  }, [os]);

  return null;
}