useCopyToClipboard

Копирование текста в буфер обмена с временным состоянием «скопировано».

React-хук, который оборачивает Clipboard API со встроенным таймаутом для сброса состояния копирования. Полезен для кнопок копирования, показывающих кратковременное подтверждение.

Установка


pnpm dlx shadcn@latest add @oracul/use-copy-to-clipboard

Использование

Базовое

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
 
function CopyButton({ text }: { text: string }) {
  const { copyToClipboard, isCopied } = useCopyToClipboard();
 
  return (
    <button onClick={() => copyToClipboard(text)}>
      {isCopied ? "Copied!" : "Copy"}
    </button>
  );
}

Произвольный таймаут

По умолчанию состояние isCopied сбрасывается через 2 секунды. Это можно изменить:

const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 3000 });

Установите timeout в 0, чтобы isCopied оставалось true бессрочно (пока компонент не будет размонтирован).

Колбэк при копировании

Выполните побочный эффект при успешном копировании:

const { copyToClipboard, isCopied } = useCopyToClipboard({
  onCopy: () => console.log("Copied to clipboard"),
});

Со сменой иконки

Распространённый приём — на короткое время сменить иконку, чтобы подтвердить копирование:

import { CheckIcon, CopyIcon } from "lucide-react";
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
import { Button } from "@/components/ui/button";
 
function CopyButton({ value }: { value: string }) {
  const { copyToClipboard, isCopied } = useCopyToClipboard();
 
  return (
    <Button
      aria-label="Copy to clipboard"
      onClick={() => copyToClipboard(value)}
      size="icon"
      variant="outline"
    >
      {isCopied ? (
        <CheckIcon aria-hidden="true" />
      ) : (
        <CopyIcon aria-hidden="true" />
      )}
    </Button>
  );
}

API

function useCopyToClipboard(options?: {
  timeout?: number;
  onCopy?: () => void;
}): {
  copyToClipboard: (value: string) => void;
  isCopied: boolean;
};

Опции

Свойство	Тип	По умолчанию	Описание
`timeout`	`number`	`2000`	Количество миллисекунд до сброса `isCopied` в `false`. Установите `0`, чтобы значение оставалось `true`.
`onCopy`	`() => void`	—	Колбэк, вызываемый после успешного копирования.

Возвращаемое значение

Свойство	Тип	Описание
`copyToClipboard`	`(value: string) => void`	Вызывайте, передавая текст для копирования. Ничего не делает, если `value` пустое или Clipboard API недоступен.
`isCopied`	`boolean`	`true` в течение `timeout` мс после успешного копирования, затем сбрасывается.

На этой странице

Установка Использование Базовое Произвольный таймаут Колбэк при копировании Со сменой иконки API Опции Возвращаемое значение