useCopyToClipboard

Copy text to a user’s clipboard.

useCopyToClipboard wraps the Clipboard API through the same implementation as useClipboard, returning the copied text, a copy function, and the isSupported status.

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 the useClipboard behavior is needed under this related hook name

Notes

• SSR-safe: Returns an empty string, a copy function, and false during server-side rendering. No navigator access occurs on the server.
• Browser support: isSupported reports whether navigator.clipboard is available. Copying still falls back to document.execCommand("copy") when needed.
• Permissions: Some browsers require user permission for Clipboard API access. Use alongside usePermission to check clipboard-read and clipboard-write status.

Usage

function Demo() {
  const [value, setValue] = useState("");
  const [text, copy, isSupported] = 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>
        Clipboard API supported: <b>{isSupported ? "yes" : "no"}</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>
  );
};

API

useClipBoard

Returns

readonly [string, (txt: string) => Promise<void>, boolean]: Returns a readonly tuple containing the clipboard text, copy function, and support status.

Arguments