8
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

クリップボードにテキストをコピーするボタンの実装

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メソッドを使います。
また、逆にクリップボードにコピーされているものを取得する際は、readTextreadメソッドを使います。

ボタンの実装

これは単純にonClickイベントに↑の関数を指定するだけです

<Button onClick={() => copyTextToClipboard()}>
  Copy!
</Button>

おまけ : ボタンクリックしたときに「コピーしたよ!」とメッセージを出したい

ボタンをクリックするだけだとコピーされたかどうか分かりにくいのでメッセージを表示してあげたいですよね。
こんな感じ
スクリーンショット 2021-05-29 17.50.21.png

自分はデザインライブラリとしてSemantic-UIを使っているので、簡単に実装できました。
semantic-ui-reactPopupパターンを使います。

<Popup
  trigger={
    <Button onClick={() => copyUrlToClipboard()}>
      <Icon name='linkify' />
      <div>リンクを<br/>コピー</div>
    </Button>
  }
  content='Copied!'
  on='click'
  position='left center'
/>

参照

間違っている点や説明が足りない部分がありましたら、コメントして下さい! ><

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
8
Help us understand the problem. What are the problem?