Comment ajouter la fonctionnalité Copier dans le Presse-papiers à votre application React

La copie manuelle d'informations, qu'il s'agisse d'extraits de code, de liens URL ou de fragments de texte, peut prendre du temps et être sujette aux erreurs, en particulier sur les appareils mobiles dont l'écran est petit. L'ajout d'une fonctionnalité « copier dans le presse-papiers » permet non seulement de gagner du temps, mais réduit également le risque d'erreurs et de fautes de frappe.

Configuration de la fonctionnalité Copier dans le Presse-papiers

Dans une application React, créez un nouveau composant nommé Copier le bouton. Ce composant accepte le texte qu'il doit copier dans le presse-papiers.

Si vous n'avez pas de projet React sur lequel travailler, utilisez l'utilitaire de création d'application React pour en échafauder un.

functionCopyButton({text}) {
const copyToClipboard = () => {
// copy to clipboard
 }
return (
Copy</button>
 )
}
exportdefault CopyButton

Lorsque vous cliquez dessus, le bouton doit appeler une fonction nommée copier dans le presse-papier qui copie le texte dans le presse-papiers.

Pour implémenter la fonctionnalité de copie, vous pouvez utiliser directement l'API du presse-papiers ou utiliser un package NPM.

Ce guide vous montrera comment utiliser les deux.

Utilisation de l'API Presse-papiers pour copier du texte dans un presse-papiers dans React

Le API du Presse-papiers fournit un moyen d'interagir avec les commandes du presse-papiers telles que copier, couper et coller.

Pour y accéder, vous devez utiliser le navigateur.clipboard objet disponible dans la plupart des navigateurs modernes. Il dispose de plusieurs méthodes qui vous permettent d'écrire ou de lire le contenu du presse-papiers.

Pour écrire dans le presse-papiers, utilisez le écrireTexte méthode.

Voyons comment implémenter cela dans le copier dans le presse-papier fonction du Bouton Copier composant.

const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
 alert('Text copied to clipboard:', text);
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
 };

Le écrireTexte La méthode accepte le texte qu’elle copiera dans le presse-papiers. Cette méthode est asynchrone, vous devez donc utiliser le mot-clé wait avant de continuer.

Si le texte est copié dans le presse-papiers, affichez un message de réussite, sinon affichez le message d'erreur sous forme d'alerte.

Vérification des autorisations du navigateur

Comme bonne pratique, il est important de s’assurer que l’utilisateur a accordé au navigateur l’autorisation d’accéder au presse-papiers. Vous pouvez vérifier si l'utilisateur a accordé presse-papiers-écriture autorisation en utilisant le navigateur.permissions API Web avant de copier dans le presse-papiers 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('Text copied to clipboard!');
 } else {
thrownewError("Can't access the clipboard. Check your browser permissions.")
 }
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
};

Dans la fonction modifiée ci-dessus, ce n'est que lorsque l'utilisateur a accordé l'autorisation d'écrire dans le presse-papiers qu'il y écrit. Sinon, la fonction renvoie une erreur.

Utilisation d'un package NPM pour copier dans le presse-papiers dans React

Si vous ne souhaitez pas utiliser directement l'API du presse-papiers, il existe plusieurs packages NPM vous pouvez utiliser à la place. Pour les applications React, vous pouvez utiliser le réagir-copier dans le presse-papiers emballer. Il est très populaire avec plus d’un million de téléchargements hebdomadaires et est également facile à utiliser.

Installez-le dans votre application React en exécutant la commande suivante dans le terminal :

npm install react-copy-to-clipboard

Une fois installé, importez le Copier dans le presse-papier composant de réagir-copier dans le presse-papiers dans le Bouton Copier composant.

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

Le Copier dans le presse-papier Le composant accepte le texte que vous souhaitez copier comme accessoire. Il accepte également un composant enfant qui, lorsqu'il est cliqué, déclenche l'action de copie.

Par exemple, utilisez le code ci-dessous pour copier dans le presse-papiers avec un bouton :

console.log(result)}>
Copy</button>
</CopyToClipboard>

Notez la fonction de gestionnaire, surCopie. Il accepte deux arguments, texte et résultat où text est le texte copié et le résultat est un booléen indiquant si l'action de copie a réussi ou non.

Pourquoi utiliser une fonction Copier dans le Presse-papiers?

Vous avez appris à utiliser l'API du presse-papiers et le package React-copy-to-clipboard pour copier du texte dans le presse-papiers dans une application React. Alors que les utilisateurs de votre application peuvent simplement sélectionner le texte et utiliser la fonctionnalité de copie de votre navigateur, cliquer pour copier le texte est plus simple et améliore l'expérience utilisateur.