GitHubでレポジトリのURLをクリップボードにコピーするボタンありますよね。
そんな感じのボタンをJavaScript（React）で作りたかったので調べました。
Clipboard APIを使おう
Clipboard APIを使うと簡単に実装できます。
Clipboard APIはIE以外ほぼすべてのブラウザでサポートされています。
クリップボードコピーの方法を調べるとまず最初に出てくるのがexecCommandですが、こちらは最近のブラウザではサポートされてないらしく、Mozillaでも使わないよう警告されています。
Clipboard APIはその代替手段という感じでしょうか。
以下のような関数を作ればコピー機能を実装できます。
function copyTextToClipboard(text) {
navigator.clipboard.writeText(text)
.then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
ポイント： writeTextメソッドを使う
writeText()でプレーンテキストをクリップボードにコピーすることができます。
返り値はPromiseなので、thenなどを使って適切に処理する必要があります。
プレーンテキスト以外をコピーする場合は、writeメソッドを使います。
また、逆にクリップボードにコピーされているものを取得する際は、readTextやreadメソッドを使います。
ボタンの実装
これは単純にonClickイベントに↑の関数を指定するだけです
<Button onClick={() => copyTextToClipboard()}>
Copy!
</Button>
おまけ ： ボタンクリックしたときに「コピーしたよ！」とメッセージを出したい
ボタンをクリックするだけだとコピーされたかどうか分かりにくいのでメッセージを表示してあげたいですよね。
こんな感じ
自分はデザインライブラリとしてSemantic-UIを使っているので、簡単に実装できました。
semantic-ui-reactのPopupパターンを使います。
<Popup
trigger={
<Button onClick={() => copyUrlToClipboard()}>
<Icon name='linkify' />
<div>リンクを<br/>コピー</div>
</Button>
}
content='Copied!'
on='click'
position='left center'
/>
参照
- Clipboard - Web APIs | MDN
- Async Clipboard APIでJavaScriptからクリップボードを操作する
- ブラウザ上でJavaScriptを利用したクリップボードへのコピー機能の実装Clipboard API版
- Document.execCommand() - Web API | MDN
間違っている点や説明が足りない部分がありましたら、コメントして下さい！ ><