useCopyToClipboard

Copy text to a user’s clipboard.

useCopyToClipboard wraps the Clipboard API to provide a convenient tuple of the last copied text and a copy function. This is a drop-in alias for useClipboard, so you can use whichever name fits your codebase conventions. See also useClipboard for full details.

When to Use

  • Adding “copy to clipboard” functionality when you prefer the useCopyToClipboard naming convention
  • Migrating from other hook libraries that use this naming pattern
  • Any scenario where useClipboard applies — the two hooks are interchangeable

Notes

  • SSR-safe: Returns an empty string and a no-op function during server-side rendering. No navigator access occurs on the server.
  • Browser support: Requires the Clipboard API (supported in all modern browsers).
  • Permissions: Some browsers require user permission for clipboard access. Use alongside usePermission to check clipboard-read and clipboard-write status.

Usage

Live Editor
function Demo() {
  const [value, setValue] = useState("");
  const [text, copy] = useCopyToClipboard();
  const permissionRead = usePermission("clipboard-read");
  const permissionWrite = usePermission("clipboard-write");
  return (
    <div>
      <p>
        Clipboard Permission: read <b>{permissionRead}</b> | write&nbsp;
        <b>{permissionWrite}</b>
      </p>
      <p>
        Current copied: <code>{text || "none"}</code>
      </p>
      <input
        value={value}
        onChange={(event) => {
          setValue(event.currentTarget.value);
        }}
      />
      <button onClick={() => copy(value)}>Copy</button>
    </div>
  );
};
Result

API

useClipBoard

Returns

readonly [string, (txt: string) => Promise<void>]: Returns a readonly tuple.

Arguments