Blife UI

¿Qué hace?

Copia texto al portapapeles del navegador y proporciona estado para saber si la copia fue exitosa. Se actualiza automáticamente cuando copias.

Importación

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

Uso básico

function CopyButton() {
  const { copy, copied } = useClipboard();
 
  return (
    <button onClick={() => copy("Texto a copiar")}>{copied ? "¡Copiado!" : "Copiar texto"}</button>
  );
}

Cómo funciona:

copy(texto) → Copia el texto al portapapeles
copied → true si se copió exitosamente (se resetea después de 1.5s por defecto)

Ejemplos comunes

Mostrar estado de copia

function ShareLink({ url }) {
  const { copy, copied } = useClipboard();
 
  return (
    <div>
      <button onClick={() => copy(url)}>{copied ? "✓ Copiado" : "Copiar enlace"}</button>
    </div>
  );
}

Manejar errores

function CopyButton() {
  const { copy, error } = useClipboard();
 
  return (
    <div>
      <button onClick={() => copy("Texto")}>Copiar</button>
      {error && <p className="text-red-500">Error: {error.message}</p>}
    </div>
  );
}

Callbacks de éxito y error

function CopyLink({ url }) {
  const { copy } = useClipboard({
    onSuccess: (text) => {
      console.log(`Copiado: ${text}`);
      // Mostrar notificación, enviar analytics, etc.
    },
    onError: (error) => {
      console.error("Error al copiar:", error);
      // Mostrar mensaje de error al usuario
    },
  });
 
  return <button onClick={() => copy(url)}>Copiar enlace</button>;
}

Verificar soporte del navegador

function ClipboardFeature() {
  const { copy, isSupported } = useClipboard();
 
  if (!isSupported()) {
    return <p>Tu navegador no soporta copiar al portapapeles</p>;
  }
 
  return <button onClick={() => copy("Texto")}>Copiar</button>;
}

Personalizar tiempo de reset

function CopyButton() {
  // El estado 'copied' se resetea después de 3 segundos
  const { copy, copied } = useClipboard({
    timeout: 3000,
  });
 
  return <button onClick={() => copy("Texto")}>{copied ? "Copiado" : "Copiar"}</button>;
}

Resetear manualmente

function CopyButton() {
  const { copy, copied, reset } = useClipboard();
 
  return (
    <div>
      <button onClick={() => copy("Texto")}>{copied ? "Copiado" : "Copiar"}</button>
      {copied && <button onClick={reset}>Resetear</button>}
    </div>
  );
}

API

Parámetros

El hook acepta un objeto de opciones opcional:

Parámetro	Tipo	Descripción
`timeout`	`number`	Tiempo en ms antes de resetear `copied` (default: 1500)
`onSuccess`	`(text: string) => void`	Callback ejecutado cuando la copia es exitosa
`onError`	`(error: Error) => void`	Callback ejecutado si ocurre un error

Retorno

Valor	Tipo	Descripción
`copy`	`(value: string) => Promise<boolean>`	Función para copiar texto al portapapeles
`copied`	`boolean`	`true` si se copió exitosamente
`error`	`Error \| null`	Error si la copia falló
`reset`	`() => void`	Resetea el estado `copied` y limpia errores
`isSupported`	`() => boolean`	Verifica si la API de portapapeles está disponible

use-clipboard