Charonyu's Profile

我想要設定複製文字功能回傳兩個值，一個是複製是否完成，一個是複製方法的函數

複製文字有兩種方法

第一種，新型瀏覽器支援的複製方法


 await navigator.clipboard.writeText(text);

第二種，舊型的複製方法，有些瀏覽器不支援新型的


     const copyText = document.createElement("textarea");
        copyText.value = text;
        document.body.appendChild(copyText);
        copyText.select();
        document.execCommand("copy");
        document.body.removeChild(copyText);

知道的這兩種方法後就可以開始寫了


import { useState, useCallback } from "react";

const useCopyToClipboard = () => {
  const [isCopied, setIsCopied] = useState<boolean>(false);

  const copyToClipboard = useCallback(async (text: string) => {
    try {
			//判斷是否可以用新的方法
      if (!navigator?.clipboard) {
        console.warn(
          "Clipboard API not supported, falling back to execCommand"
        );
        const copyText = document.createElement("textarea");
        copyText.value = text;
        document.body.appendChild(copyText);
        copyText.select();
        document.execCommand("copy");
        document.body.removeChild(copyText);
      } else {
        await navigator.clipboard.writeText(text);
      }

      setIsCopied(true);

      // Reset after 3 seconds
      setTimeout(() => setIsCopied(false), 3000);
    } catch (error) {
      console.error("Failed to copy text: ", error);
      setIsCopied(false);
    }
  }, []);

  return [isCopied, copyToClipboard] as const;
};

export default useCopyToClipboard;

大功告成!

[Day 16] 使用複製文字功能吧useCopyToClipboard