Blife UI

¿Qué hace?

Detecta el sistema operativo del usuario usando el User Agent del navegador. Útil para mostrar instrucciones específicas por plataforma o personalizar la experiencia.

Importación

import { useOperatingSystem } from "@blifedesarrollo/hooks";

Uso básico

function App() {
  const os = useOperatingSystem();
 
  return (
    <div>
      <p>Tu sistema operativo es: {os}</p>
      {os === "undetermined" && <p>Detectando...</p>}
    </div>
  );
}

Sistemas operativos detectados

El hook puede detectar:

"macos" → macOS (MacBooks, iMacs, Mac Pro)
"ios" → iOS (iPhone, iPad, iPod Touch)
"windows" → Windows (todas las versiones)
"android" → Android (teléfonos y tablets)
"linux" → Distribuciones de Linux
"chromeos" → ChromeOS (Chromebooks)
"undetermined" → No se pudo determinar o aún detectando (SSR)

Ejemplos comunes

Mostrar instrucciones por plataforma

function DownloadButton() {
  const os = useOperatingSystem();
 
  const getDownloadLink = () => {
    if (os === "macos" || os === "ios") return "/download/mac.dmg";
    if (os === "windows") return "/download/windows.exe";
    if (os === "linux") return "/download/linux.tar.gz";
    return "/download";
  };
 
  return (
    <a href={getDownloadLink()}>
      Descargar para {os === "macos" ? "macOS" : os === "windows" ? "Windows" : os}
    </a>
  );
}

Atajos de teclado específicos

function KeyboardShortcuts() {
  const os = useOperatingSystem();
  const modifierKey = os === "macos" || os === "ios" ? "⌘" : "Ctrl";
 
  return (
    <div>
      <p>{modifierKey} + K para buscar</p>
      <p>{modifierKey} + S para guardar</p>
    </div>
  );
}

Estilos específicos por plataforma

function Button() {
  const os = useOperatingSystem();
 
  return (
    <button className={os === "macos" ? "mac-style" : os === "windows" ? "windows-style" : ""}>
      Click me
    </button>
  );
}

SSR (Server Side Rendering)

Por defecto, el hook retorna "undetermined" durante SSR y detecta el SO en el cliente. Esto evita errores de hidratación.

// ✅ Por defecto es seguro para SSR
const os = useOperatingSystem(); // Retorna "undetermined" en servidor
 
// Si necesitas detectar inmediatamente (no recomendado para SSR)
const os = useOperatingSystem({
  getValueInEffect: false, // ← Detecta durante el render
});

API

Parámetros

Parámetro	Tipo	Descripción
`options`	`UseOsOptions`	Opciones opcionales (ver abajo)

Opciones

Opción	Tipo	Default	Descripción
`getValueInEffect`	`boolean`	`true`	Si es `true`, detecta el SO dentro de `useEffect` (recomendado para SSR)

Retorno

Valor	Tipo	Descripción
`os`	`'undetermined' \| 'macos' \| 'ios' \| 'windows' \| 'android' \| 'linux' \| 'chromeos'`	Sistema operativo detectado

use-operating-system