Blife UI

¿Qué hace?

Trabajar con cookies es tan simple como usar useState, pero con opciones avanzadas. Los cambios se sincronizan automáticamente entre todos los componentes.

Importación

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

Uso básico

function ThemeToggle() {
  const [theme, { setValue: setTheme, clear: clearTheme }] = useCookie({
    name: "user-theme",
    defaultValue: "light",
    expires: 365, // Expira en 1 año
  });
 
  const toggleTheme = () => {
    setTheme((currentTheme) => (currentTheme === "light" ? "dark" : "light"));
  };
 
  return (
    <div data-theme={theme}>
      <p>Tema actual: {theme}</p>
      <button onClick={toggleTheme}>Cambiar tema</button>
      <button onClick={clearTheme}>Resetear</button>
    </div>
  );
}

Cómo funciona:

Retorna [valor, { setValue, clear }] como useState
setValue acepta valor directo o función updater
Los valores se serializan automáticamente a JSON
Los cambios se sincronizan entre componentes

Ejemplos comunes

Guardar preferencias del usuario

function UserPreferences() {
  const [preferences, { setValue }] = useCookie({
    name: "user-preferences",
    defaultValue: { theme: "light", lang: "es" },
    expires: 365,
  });
 
  const updateTheme = (newTheme) => {
    setValue((prev) => ({ ...prev, theme: newTheme }));
  };
 
  return (
    <div>
      <p>Tema: {preferences.theme}</p>
      <button onClick={() => updateTheme("dark")}>Modo oscuro</button>
    </div>
  );
}

Token de autenticación (producción)

function AuthProvider() {
  const [token, { setValue: setToken, clear: clearToken }] = useCookie({
    name: "auth-token",
    defaultValue: null,
    expires: 7, // 1 semana
    secure: true, // Solo HTTPS
    sameSite: "strict", // Máxima seguridad
  });
 
  const login = (newToken) => {
    setToken(newToken);
  };
 
  const logout = () => {
    clearToken();
  };
 
  return { token, login, logout };
}

Sesión temporal (maxAge)

function SessionManager() {
  // Expira en 1 hora (3600 segundos)
  const [session, { setValue, clear }] = useCookie({
    name: "session",
    defaultValue: null,
    maxAge: 3600, // 1 hora
  });
 
  return { session, setValue, clear };
}

Opciones de expiración

`expires` - Días hasta que expire

const [data, handlers] = useCookie({
  name: "user-data",
  defaultValue: {},
  expires: 30, // Expira en 30 días
});

`maxAge` - Segundos hasta que expire

const [session, handlers] = useCookie({
  name: "session",
  defaultValue: null,
  maxAge: 3600, // 1 hora (3600 segundos)
});
 
// Valores comunes:
// 3600 = 1 hora
// 86400 = 1 día
// 604800 = 1 semana

Opciones de seguridad

`secure` - Solo HTTPS

// ✅ Producción
const [token, handlers] = useCookie({
  name: "auth-token",
  defaultValue: null,
  secure: true, // Solo se envía por HTTPS
});

`sameSite` - Política de envío

// Máxima seguridad (default: "lax")
const [auth, handlers] = useCookie({
  name: "auth",
  defaultValue: null,
  sameSite: "strict", // Solo mismo sitio
  secure: true,
});
 
// Para integraciones cross-site (requiere secure: true)
const [tracking, handlers] = useCookie({
  name: "tracking",
  defaultValue: null,
  sameSite: "none", // Se envía en todos los requests
  secure: true, // Requerido con "none"
});

Opciones de alcance

`domain` - Compartir entre subdominios

const [shared, handlers] = useCookie({
  name: "shared-data",
  defaultValue: {},
  domain: ".midominio.com", // Válida en app.midominio.com, api.midominio.com
});

`path` - Restringir a rutas específicas

const [admin, handlers] = useCookie({
  name: "admin-settings",
  defaultValue: {},
  path: "/admin", // Solo disponible en /admin/*
});

API

Parámetros

Parámetro	Tipo	Requerido	Descripción
`name`	`string`	Sí	Nombre único de la cookie
`defaultValue`	`any`	Sí	Valor por defecto si no existe
`expires`	`number`	No	Días hasta que expire
`maxAge`	`number`	No	Segundos hasta que expire
`domain`	`string`	No	Dominio donde es válida
`path`	`string`	No	Ruta donde es válida (default: `"/"`)
`secure`	`boolean`	No	Solo HTTPS
`sameSite`	`'strict' \| 'lax' \| 'none'`	No	Política SameSite (default: `"lax"`)

Retorno

Retorna un array con dos elementos:

const [value, { setValue, clear }] = useCookie(options);

Elemento	Tipo	Descripción
`value`	`any`	Valor actual de la cookie (parseado de JSON)
`setValue`	`(value \| updater) => void`	Establece un nuevo valor (como `useState`)
`clear`	`() => void`	Elimina la cookie

Formas de usar setValue:

setValue(nuevoValor) → Establece valor directo
setValue((prev) => nuevoValor) → Usa función updater

use-cookie