Implémenter la fonctionnalité Copier dans le presse-papiers dans React

1. Copier dans le presse-papiers dans React à l’aide de la méthode e.clipboardData.setData()
2. Copier dans le presse-papiers dans React à l’aide de navigator.clipboard.writeText()
3. Copier dans le presse-papiers à l’aide du package react-copy-to-clipboard

Copier et coller sont des fonctionnalités universellement populaires utilisées sur toutes sortes d’appareils et de systèmes d’exploitation.

Lors du développement d’une application, vous pouvez parfois prédire qu’une valeur spécifique, par exemple un morceau de texte, devra être copiée. Dans ces situations, vous pouvez implémenter un bouton qui le copie automatiquement. Ceci est utile car les personnes qui utilisent des téléphones peuvent parfois avoir du mal à sélectionner du texte.

ReactJS est optimisé pour permettre le développement d’applications conviviales. Le framework facilite la mise en œuvre d’un bouton (ou lien) cliquable qui copie un morceau de texte.

Copier dans le presse-papiers dans React à l’aide de la méthode e.clipboardData.setData()

Cette méthode permet d’écouter facilement les événements et de copier un texte une fois qu’ils se produisent. Votre gestionnaire devra recevoir une référence à l’événement du navigateur.

Dans React, ce sera une instance de SyntheticEvent, référencée simplement comme e. Regardons un exemple simple :

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>)
  }
}

Dans cet exemple, nous avons une valeur text stockée dans la propriété d’état text. Ensuite, une fois le bouton cliqué, nous exécutons le gestionnaire, qui utilise la méthode e.clipboardData.setData() pour pousser le texte dans le presse-papiers.

La méthode prend deux arguments : le type de valeur copiée et la valeur elle-même.

Selon caniuse.com, 95% des personnes naviguant sur Internet dans le monde utilisent le navigateur qui prend en charge cette fonctionnalité. Il est donc sûr à utiliser.

Copier dans le presse-papiers dans React à l’aide de navigator.clipboard.writeText()

L’interface Navigator est une API plus moderne. Il a presque le même support (92%) pour les utilisateurs du monde entier. Il est compatible avec les composants fonctionnels et de classe.

Regardons un exemple :

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>)
  }
}

Comme vous pouvez le voir, il s’agit d’une solution plus simple qui nécessite moins de lignes de code. Il ne vous oblige pas à importer des valeurs ou à installer des packages externes.

Pour cette seule raison, pour moi, l’interface Navigator est le meilleur moyen de copier du texte dans un presse-papiers. Vous pouvez l’essayer vous-même sur playcode.

Avant d’utiliser l’interface Navigator, rappelez-vous que les anciennes versions d’Internet Explorer ne la supportent pas. De plus, dans Chrome, il semble que l’interface Navigator ne fonctionne que tant que la page est marquée comme sécurisée (HTTPS ou localhost).

En dehors de ces deux points, il n’y a aucun inconvénient à utiliser cette méthode.

Copier dans le presse-papiers à l’aide du package react-copy-to-clipboard

Si vous n’êtes pas contre l’installation d’un package externe, react-copy-to-clipboard est probablement votre meilleure solution. Pour obtenir des informations détaillées sur les différentes fonctionnalités, consultez sa page officielle npm.

Une fois installé, vous aurez accès au composant personnalisé <CopyToClipboard>. Vous pouvez utiliser son attribut text pour fournir une valeur qui doit être copiée. Ensuite, vous pouvez ajouter un simple composant <bouton>, qui agira comme un déclencheur pour copier la valeur du texte dans le presse-papiers.