React编写hooks实现复制

核心是navigator.clipboard API document.execCommand("copy") 如果浏览器不支持navigator.clipboar,通过创建textarea元素,然后选中value,使用document.execCommand("copy")进行复制

import { useState } from "react";

const useCopy = () => {
  const [isCopied, setIsCopied] = useState(false);

  const copyToClipboard = (text) => {
    if (!navigator.clipboard) {
      fallbackCopyToClipboard(text);
      return;
    }

    navigator.clipboard.writeText(text).then(() => {
      setIsCopied(true);
      setTimeout(() => {
        setIsCopied(false);
      }, 2000); // 复制成功后2秒钟后重置为未复制状态
    });
  };
  // 兼容
  const fallbackCopyToClipboard = (text) => {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "absolute";
    textArea.style.left = "-9999px";
    textArea.style.opacity = "0";

    document.body.appendChild(textArea);
    textArea.select();

    try {
      document.execCommand("copy");
      setIsCopied(true);
      setTimeout(() => {
        setIsCopied(false);
      }, 2000); // 复制成功后2秒钟后重置为未复制状态
    } catch (error) {
      console.error("复制失败：", error);
    }

    document.body.removeChild(textArea);
  };

  return { isCopied, copyToClipboard };
};

export default useCopy;