useCopyToClipboard：React 剪贴板复制 Hook

本文介绍 useCopyToClipboard 这个实用的 React Hook，它可以帮助你轻松实现复制文本到剪贴板的功能，并提供了跨浏览器兼容的解决方案。

简介

useCopyToClipboard 是 @uidotdev/usehooks 库中的一个 Hook，用于将文本复制到剪贴板。它抽象了在不同浏览器中复制文本的复杂性，优先使用现代的 navigator.clipboard.writeText API，如果不支持则回退到传统的 document.execCommand("copy") 方法。

安装

bash

npm i @uidotdev/usehooks

返回值

该 Hook 返回一个数组，包含两个元素：

索引	类型	说明
0	`string`	上次复制到剪贴板的值
1	`function`	用于将指定值复制到剪贴板的函数

使用示例

jsx

import * as React from "react";
import { useCopyToClipboard } from "@uidotdev/usehooks";

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}
            onClick={() => copyToClipboard(randomHash)}
          >
            {hasCopiedText ? "已复制" : "复制"}
          </button>
        </pre>
      </article>
      {hasCopiedText && (
        <dialog open={hasCopiedText}>
          <h4>已复制 🎉</h4>
          <textarea placeholder="在此粘贴复制的文本" />
        </dialog>
      )}
    </section>
  );
}

核心特性

跨浏览器兼容：自动检测并使用最佳的复制方法
现代 API 优先：优先使用 navigator.clipboard.writeText
优雅降级：在不支持现代 API 的浏览器中使用 execCommand 回退
简单易用：只需一行代码即可实现复制功能
状态追踪：返回已复制的文本值，方便显示反馈

实现原理

javascript

function useCopyToClipboard() {
  const [copiedText, setCopiedText] = React.useState(null);

  const copyToClipboard = React.useCallback(async (text) => {
    if (!navigator?.clipboard) {
      // 回退方案：使用 document.execCommand
      return false;
    }

    try {
      await navigator.clipboard.writeText(text);
      setCopiedText(text);
      return true;
    } catch (error) {
      console.warn("复制失败:", error);
      setCopiedText(null);
      return false;
    }
  }, []);

  return [copiedText, copyToClipboard];
}

使用场景

复制 API 密钥：如示例所示，方便用户复制长串密钥
分享链接：一键复制分享链接到剪贴板
代码片段：复制代码示例到剪贴板
优惠码复制：电商网站中复制优惠码
表单数据：复制表单中的特定字段值

注意事项

HTTPS 要求：navigator.clipboard API 需要在安全上下文（HTTPS 或 localhost）中运行
用户权限：某些浏览器可能需要用户交互才能访问剪贴板
浏览器支持：现代浏览器都支持该 API，但建议在生产环境中测试

字节笔记本