クリックしてクリップボードにコピーする機能をReactで作る

これまた下書きフォルダに入りっぱなしになっていた文章を見つけたので、整理してアウトプットする。
去年書いていたものだ。

---

よくある、ボタンやテキストなどをクリックしたときに、クリップボードに対象の文字が自動的にコピーされる機能。
あれをReactで実装したときの備忘録を書いていく。

react-copy-to-clipboard というライブラリを使用する

github.com

create-react-appで雛形を作成

npx create-react-app react-copy-to-clipboard-sample
cd react-copy-to-clipboard-sample
yarn start

以前のポストにも書いたが、create-react-appでブラウザが勝手に立ち上がらないようにpackage.json内のscriptsのstartコマンドにBROWSER=none オプションを付けている。

    "start": "BROWSER=none react-scripts start",

react-copy-to-clipboard を使ってクリップボードにコピーする機能を実装する

インストールは下記

yarn add react-copy-to-clipboard

src/App.js 内を下記のように記述する。
CopyToClipboard をクリックした際に text の文字がクリップボードにコピーされる。また、その際に onCopy 内の記述が動く。
シンプルで使いやすいライブラリ。

import React, { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';

export default () => {
  const [text, setText] = useState('Sample Text');

  const updateText = (text) => {
    setText(text);
  };

  return (
    <div className="App">
      <input
        type="text"
        onChange={(e) => updateText(e.target.value)}
        value={text}
      />
      <div className="App-copy-area">
        <CopyToClipboard
          text={text}
          onCopy={() => alert(`クリップボードに「${text}」をコピーしました！`)}
        >
          <button>クリップボードにコピーする</button>
        </CopyToClipboard>
      </div>
    </div>
  );
};