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.
Table des matières
Configuration de la fonctionnalité Copier dans le Presse-papiers
Dans une application React, créez un nouveau composant nommé CopyButton. 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 créer un.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}export default CopyButton
Lorsque vous cliquez dessus, le bouton doit appeler une fonction nommée copyToClipboard 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 l’objet navigator.clipboard 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 la méthode writeText.
Voyons comment implémenter cela dans la fonction copyToClipboard du composant CopyButton.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Text copied to clipboard:', text);
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
La méthode writeText accepte le texte qu’elle va copier 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é l’autorisation d’écriture dans le presse-papiers à l’aide de l’API Web navigator.permissions 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 {
throw new Error("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, vous pouvez utiliser plusieurs packages NPM à 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 composant CopyToClipboard de React-copy-to-clipboard dans le composant CopyButton.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Le composant CopyToClipboard 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 :
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
Notez la fonction de gestionnaire, onCopy. Il accepte deux arguments, text et result, 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.