Docs
Copy to Clipboard

Copy to Clipboard

Copy text to the clipboard.

About

The useCopyToClipboard hook is valuable as it simplifies the process of copying text to the clipboard in a way that works across different browsers. It leverages the modern navigator.clipboard.writeText method when available, offering a more efficient and secure method for copying text. If the writeText method isn't supported by the browser, the hook gracefully falls back to the conventional approach using document.execCommand("copy").

Return Values

IndexTypeDescription
0stringThe value that was last copied to the clipboard.
1functionA function to copy a specified value to the clipboard.

Installation

Run the following command:

npx scriptkavi-hooks@latest add copy-to-clipboard

Usage

import { useCopyToClipboard } from "@/hooks/copy-to-clipboard"
import * as React from "react"
 
import { checkIcon, copyIcon } from "./icons"
 
const randomHash = crypto.randomUUID()
 
export default function App() {
  const [copiedText, copyToClipboard] = useCopyToClipboard()
  const hasCopiedText = Boolean(copiedText)
  return (
    <section>
      <h1>useCopyToClipboard</h1>
      <article>
        <label>Fake API Key</label>
        <pre>
          <code>{randomHash}</code>
          <button
            disabled={hasCopiedText}
            className="link"
            onClick={() => copyToClipboard(randomHash)}
          >
            {hasCopiedText ? checkIcon : copyIcon}
          </button>
        </pre>
      </article>
      {hasCopiedText && (
        <dialog open={hasCopiedText}>
          <h4>
            Copied{" "}
            <span role="img" aria-label="Celebrate Emoji">
              🎉
            </span>
          </h4>
          <textarea placeholder="Paste your copied text" />
        </dialog>
      )}
    </section>
  )
}
CookiesCounter