arkyn
ChangelogGuides
docs / hooks / use-copy-to-clipboard

useCopyToClipboard

Copies text to the clipboard and reports whether the operation succeeded.

Import

ts

import { useCopyToClipboard } from "@arkyn/components/useCopyToClipboard";

Parameters

This hook does not accept any parameters.

Return value

The hook returns an object with a single function used to copy text to the clipboard.
Type: { copyToClipboard: (text: string) => Promise<boolean> }
  • copyToClipboard — (text: string) => Promise<boolean>. Copies text to the clipboard. Resolves to true on success, false on failure. Never throws.

Usage example

tsx

import { useCopyToClipboard } from "@arkyn/components/useCopyToClipboard";


function CopyButton({ value }) {
  const { copyToClipboard } = useCopyToClipboard();


  async function handleClick() {
    const success = await copyToClipboard(value);
    if (success) console.log("Copied!");
  }


  return <button onClick={handleClick}>Copy</button>;
}

Notes

  • Tries navigator.clipboard.writeText first. If it's unavailable or rejects, it falls back to a hidden <textarea> with document.execCommand("copy").
  • The fallback path is used internally by an unexported helper, copyWithFallback, for insecure contexts (non-HTTPS) or older browsers that don't support the Clipboard API.
  • Never throws; any failure at any stage simply resolves to false.
Related in Hooks
On this page
    arkyn