Comment ajouter la fonctionnalité Copier dans le Presse-papiers à votre application React
La saisie manuelle d'informations, qu'il s'agisse de portions de code, d'adresses web ou de fragments de texte, peut s'avérer chronophage et source d'erreurs, particulièrement sur les appareils mobiles aux écrans réduits. L'intégration d'une fonctionnalité "copier dans le presse-papier" permet non seulement de gagner un temps précieux, mais aussi de réduire significativement le risque d'erreurs et de fautes de frappe.
Mise en place de la fonctionnalité Copier dans le Presse-papier
Dans le cadre d'une application React, il est judicieux de créer un nouveau composant, que nous nommerons CopyButton. Ce composant aura pour rôle de recevoir le texte à transférer vers le presse-papier.
Si vous ne disposez pas déjà d'un projet React, vous pouvez facilement en initier un en utilisant l'outil de création d'applications React.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copier</button>
)
}export default CopyButton
Au moment où l'utilisateur cliquera sur le bouton, celui-ci devra invoquer une fonction, appelée ici copyToClipboard, qui aura pour mission de transférer le texte vers le presse-papier.
Pour mettre en œuvre cette fonctionnalité de copie, il est possible de recourir directement à l'API du presse-papier, ou bien d'utiliser un module NPM.
Ce tutoriel vous expliquera comment procéder en utilisant ces deux approches.
Utilisation de l'API Presse-papier pour la copie de texte dans React
L'API Presse-papier offre une méthode pour interagir avec les fonctionnalités du presse-papier, telles que copier, couper et coller.
Pour y accéder, il est nécessaire d'utiliser l'objet navigator.clipboard, accessible dans la majorité des navigateurs récents. Cet objet dispose de plusieurs méthodes qui permettent d'écrire ou de lire le contenu du presse-papier.
Pour écrire dans le presse-papier, vous devrez utiliser la méthode writeText.
Examinons comment implémenter cela dans la fonction copyToClipboard de notre composant CopyButton.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Texte copié dans le presse-papier :', text);
} catch (error) {
alert('Erreur lors de la copie dans le presse-papier :', error);
}
};
La méthode writeText prend en paramètre le texte qui doit être copié dans le presse-papier. Cette méthode étant asynchrone, il est nécessaire d'utiliser le mot-clé await pour s'assurer que l'action est complétée avant de poursuivre l'exécution.
Si le texte est correctement copié dans le presse-papier, un message de confirmation s'affiche, sinon, un message d'erreur est affiché sous forme d'alerte.
Vérification des autorisations du navigateur
Il est recommandé de vérifier que l'utilisateur a accordé au navigateur la permission d'accéder au presse-papier. Vous pouvez vérifier si l'utilisateur a autorisé l'écriture dans le presse-papier en utilisant l'API Web navigator.permissions avant toute tentative de copie, comme indiqué ci-dessous.
const copyToClipboard = async () => {
try {
const permissions = await navigator.permissions.query({name: "clipboard-write"})
if (permissions.state === "granted" || permissions.state === "prompt") {
await navigator.clipboard.writeText(text);
alert('Texte copié dans le presse-papier !');
} else {
throw new Error("Impossible d'accéder au presse-papier. Veuillez vérifier les autorisations de votre navigateur.")
}
} catch (error) {
alert('Erreur lors de la copie dans le presse-papier :', error);
}
};
Dans la fonction modifiée ci-dessus, l'écriture dans le presse-papier ne sera effectuée que si l'utilisateur a donné son accord. Dans le cas contraire, la fonction générera une erreur.
Utilisation d'un module NPM pour copier dans le presse-papier dans React
Si vous ne souhaitez pas utiliser directement l'API du presse-papier, il est possible de faire appel à divers modules NPM. Pour les applications React, il est recommandé d'utiliser le module react-copy-to-clipboard. Il jouit d'une grande popularité, avec plus d'un million de téléchargements hebdomadaires, et est également très simple à utiliser.
Installez-le dans votre projet React en exécutant la commande suivante dans votre terminal :
npm install react-copy-to-clipboard
Une fois installé, importez le composant CopyToClipboard de react-copy-to-clipboard au sein de votre composant CopyButton.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Le composant CopyToClipboard prend en paramètre le texte que vous souhaitez copier. Il prend également en charge un composant enfant qui, lorsque l'utilisateur cliquera dessus, déclenchera l'action de copie.
Par exemple, le code ci-dessous permettra de copier dans le presse-papier au moyen d'un bouton :
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copier</button>
</CopyToClipboard>
Notez la fonction de gestionnaire, onCopy. Elle accepte deux paramètres, text et result, où text correspond au texte copié, et result un booléen indiquant si l'opération de copie s'est déroulée avec succès ou non.
Pourquoi intégrer une fonction Copier dans le Presse-papier ?
Nous avons vu comment utiliser l'API du presse-papier, ainsi que le module react-copy-to-clipboard pour effectuer des copies de texte dans une application React. Bien que les utilisateurs de votre application puissent sélectionner le texte et utiliser la fonction de copie de leur navigateur, l'implémentation d'un bouton dédié est une option plus pratique et améliore l'expérience utilisateur.