Comment créer un bouton copier-coller en JavaScript et React
19/01/2025 • Melvynx
19/01/2025 • Melvynx
Le bouton copier-coller est devenu un élément essentiel dans nos applications web modernes. Que ce soit pour copier un lien, un code ou un texte, il améliore considérablement l'expérience utilisateur.
Dans cet article, je vais t'expliquer comment créer un bouton copier-coller efficace, à la fois en JavaScript vanilla et en React.
Le copier-coller sur le web utilise l"API Clipboard, qui fait partie des Web APIs modernes. Cette API nous permet d"accéder au presse-papier du système d"exploitation de manière sécurisée.
Il existe deux principales méthodes pour interagir avec le presse-papier :
navigator.clipboard.writeText()
- Pour copier du textenavigator.clipboard.readText()
- Pour lire le contenu du presse-papierL"API Clipboard nécessite que ton site soit servi en HTTPS ou soit en localhost pour des raisons de sécurité.
Il existe plusieurs façons d"implémenter le copier-coller :
await navigator.clipboard.writeText("Texte à copier");
const element = document.createElement("textarea");
element.value = "Texte à copier";
document.body.appendChild(element);
element.select();
document.execCommand("copy");
document.body.removeChild(element);
const input = document.querySelector("input");
input.select();
document.execCommand("copy");
La méthode recommandée aujourd"hui est d"utiliser l"API Clipboard moderne, car elle est plus propre et plus sécurisée.
Voici un exemple simple d"implémentation :
En React, on peut créer un composant réutilisable pour le copier-coller. Voici un exemple :
Ce composant React :
useState
pour gérer l"état de la copiePour une meilleure expérience utilisateur, pense à toujours donner un feedback visuel quand la copie est réussie !
Tu peux maintenant facilement ajouter des boutons copier-coller dans tes applications web. N"hésite pas à personnaliser le style et le comportement selon tes besoins !
Si tu veux approfondir tes connaissances en JavaScript, je te conseille de lire :