useCopyToClipboard

Browser & device

A robust React hook for copying text to clipboard with fallback support

Install

$ npm install @usefy/use-copy-to-clipboard

Quick start

useCopyToClipboard.tsx

import { useCopyToClipboard } from "@usefy/use-copy-to-clipboard";

function CopyButton() {
  const [copiedText, copy] = useCopyToClipboard();

  return (
    <button onClick={() => copy("Hello World!")}>
      {copiedText ? "Copied!" : "Copy"}
    </button>
  );
}

API reference

`useCopyToClipboard(options?)`

A hook that provides clipboard copy functionality with state tracking.

Parameters

Parameter	Type	Description
`options`	`UseCopyToClipboardOptions`	Configuration options

Options

Option	Type	Default	Description
`timeout`	`number`	`2000`	Time in ms before `copiedText` resets to null. Set to `0` to disable.
`onSuccess`	`(text: string) => void`	—	Callback called when copy succeeds
`onError`	`(error: Error) => void`	—	Callback called when copy fails

Returns `[copiedText, copy]`

Index	Type	Description
`[0]`	`string \| null`	The last successfully copied text, or `null`
`[1]`	`(text: string) => Promise<boolean>`	Async function to copy text

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →