我想要設定複製文字功能回傳兩個值,一個是複製是否完成,一個是複製方法的函數
複製文字有兩種方法
第一種,新型瀏覽器支援的複製方法
 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;
大功告成!