useCopyToClipboard

Copy text to the clipboard using useCopyToClipboard.

Install:

npm i @uidotdev/usehooks

Description:

The useCopyToClipboard hook is useful because it abstracts the complexity of copying text to the clipboard in a cross-browser compatible manner. It utilizes the modern navigator.clipboard.writeText method if available, which provides a more efficient and secure way to copy text. In case the writeText method is not supported by the browser, it falls back to a traditional method using the document.execCommand(“copy”) approach.

Return Value

The useCopyToClipboard hook returns an array with the following elements:

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

Demo:

Example:

import * as React from "react";
import { useCopyToClipboard } from "@uidotdev/usehooks";
import { copyIcon, checkIcon } 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>
  );
}

More Hooks:

Sort: