Next.jsでクリップボードにコピー
Next.jsで文字列をクリップボードにコピーする処理
Clipboard APIを利用。
関数を定義
const copyToClipboard = async (text: string) => {
try {
navigator.clipboard.writeText(text);
} catch (err) {
console.error(err);
}
};
関数を呼ぶ
<button onClick={() => copyToClipboard("Copy")}>Copy</button>
コピー時に文言を変える
よくありそうなユースケースとしては、コピーしたことをユーザーに伝えるために、コピー後に文言を変えることがある。
const [isCopied, setIsCopied] = useState(false);
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1000);
} catch (err) {
console.error(err);
}
};
return (
<button onClick={() => copyToClipboard("Copy")}>
{isCopied ? "Copied!" : "Copy"}
</button>
);
Share
