useClipboard

Copy text to a user’s clipboard

useClipboard provides a simple interface for reading and writing to the system clipboard using the Clipboard API. It returns a tuple of the most recently copied text and a copy function. The hook handles permission checks internally and works across modern browsers that support the Clipboard API.

When to Use

• Adding “copy to clipboard” buttons for code snippets, URLs, or share links
• Building a paste-from-clipboard feature in forms or editors
• Implementing copy functionality in data tables or dashboards

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). Falls back gracefully in older browsers.
• Permissions: Some browsers require user permission for clipboard access. Use alongside usePermission to check clipboard-read and clipboard-write status.

Usage

function Demo() {
  const [value, setValue] = useState("");
  const [text, copy] = useClipboard();
  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>
  );
};

API

useClipBoard

Returns

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

Arguments