ログイン中のQiita Team
ログイン中のチームがありません

Qiita Team にログイン
コミュニティ
OrganizationイベントアドベントカレンダーQiitadon (β)
サービス
Qiita JobsQiita ZineQiita Blog
JavaScript
React
6
どのような問題がありますか?

投稿日

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

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'
/>

参照

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

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
flu_bit
備忘録がわりに投稿します、興味関心:経済学・機械学習・集合知、前所属:U-Tokyo GSE、Python・Julia・JavaScript・TypeScript・React

コメント

この記事にコメントはありません。
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン
6
どのような問題がありますか?
ユーザー登録して、Qiitaをもっと便利に使ってみませんか

この機能を利用するにはログインする必要があります。ログインするとさらに下記の機能が使えます。

  1. ユーザーやタグのフォロー機能であなたにマッチした記事をお届け
  2. ストック機能で便利な情報を後から効率的に読み返せる
ユーザー登録ログイン
ストックするカテゴリー