React にクリップボードへのコピー機能を実装する

1. React で e.clipboardData.setData() メソッドを使用してクリップボードにコピーする
2. React で navigator.clipboard.writeText() を使用してクリップボードにコピーする
3. react-copy-to-clipboard パッケージを使用してクリップボードにコピーする

コピーアンドペーストは、あらゆる種類のデバイスやオペレーティングシステムで使用される一般的に人気のある機能です。

アプリケーションを開発するときに、特定の値、たとえばテキストの一部をコピーする必要があると予測できる場合があります。このような状況では、ボタンを自動的にコピーするボタンを実装できます。電話を使用する人はテキストの選択に苦労することがあるので、これは便利です。

ReactJS は、ユーザーフレンドリーなアプリケーションの開発を可能にするように最適化されています。フレームワークを使用すると、テキストの一部をコピーするクリック可能なボタン（またはリンク）を簡単に実装できます。

React で e.clipboardData.setData() メソッドを使用してクリップボードにコピーする

このメソッドは、イベントをリッスンし、イベントが発生したらテキストをコピーする簡単な方法を提供します。ハンドラーは、ブラウザーイベントへの参照を受け取る必要があります。

React では、これは SyntheticEvent のインスタンスになり、単に e と呼ばれます。簡単な例を見てみましょう。

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    const handleCopy = (e) => {
      e.preventDefault()
      e.clipboardData.setData("Text", this.state.text)
    } 
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={(e) => handleCopy(e)}>Copy Text</button>
      </div>)
  }
}

この例では、text 状態プロパティにテキスト値が格納されています。次に、ボタンがクリックされると、ハンドラーが実行されます。ハンドラーは、e.clipboardData.setData() メソッドを使用してテキストをクリップボードにプッシュします。

このメソッドは、コピーされた値のタイプと値自体の 2つの引数を取ります。

caniuse.comによると、世界中のインターネットを閲覧している人々の 95％が、この機能をサポートするブラウザを使用しています。したがって、安全に使用できます。

React で navigator.clipboard.writeText() を使用してクリップボードにコピーする

Navigator インターフェースは、より最新の API です。世界中のユーザーに対してほぼ同じサポート（92％）があります。機能コンポーネントとクラスコンポーネントの両方と互換性があります。

例を見てみましょう：

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={() => navigator.clipboard.writeText(this.state.text)}>Copy Text</button>
      </div>)
  }
}

ご覧のとおり、これはより少ないコード行を必要とするより単純なソリューションです。値をインポートしたり、外部パッケージをインストールしたりする必要はありません。

この理由だけで、私にとっては、Navigator インターフェースがテキストをクリップボードにコピーするためのより良い方法です。playcode で試してみることができます。

Navigator インターフェイスを使用する前に、古いバージョンの Internet Explorer はそれをサポートしていないことを覚えておく必要があります。また、Chrome では、Navigator インターフェースは、ページがセキュア（HTTPS またはローカルホスト）としてマークされている場合にのみ機能するようです。

これらの 2つの点に加えて、この方法を使用することに欠点はありません。

react-copy-to-clipboard パッケージを使用してクリップボードにコピーする

外部パッケージのインストールに反対しないのであれば、react-copy-to-clipboard がおそらく最善の解決策です。さまざまな機能に関する詳細情報を入手するには、その公式 npm ページを参照します。

インストールすると、カスタム <CopyToClipboard> コンポーネントにアクセスできるようになります。その text 属性を使用して、コピーする必要のある値を提供できます。次に、単純な <button> コンポーネントを追加できます。これは、テキスト値をクリップボードにコピーするためのトリガーとして機能します。