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