Comment créer un bouton copier-coller en JavaScript et React

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.

Comment fonctionne le copier-coller sur le web ?

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 :

1. navigator.clipboard.writeText() - Pour copier du texte
2. navigator.clipboard.readText() - Pour lire le contenu du presse-papier

Les différentes méthodes pour copier-coller

Il existe plusieurs façons d"implémenter le copier-coller :

1. L"API Clipboard moderne :

await navigator.clipboard.writeText('Texte à copier');

2. La méthode legacy (compatible avec les anciens navigateurs) :

const element = document.createElement('textarea');
element.value = 'Texte à copier';
document.body.appendChild(element);
element.select();
document.execCommand('copy');
document.body.removeChild(element);

3. La méthode avec un élément input :

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.

Créer un bouton copier-coller en HTML/JavaScript

Voici un exemple simple d"implémentation :

<div class="container">
<input 
  type="text" 
  id="textToCopy" 
  value="Texte à copier" 
  readonly
/>
<button id="copyButton">Copier</button>
<span id="feedback"></span>
</div>

<style>
.container {
display: flex;
gap: 8px;
padding: 20px;
}
#feedback {
color: green;
opacity: 0;
transition: opacity 0.3s;
}
</style>

Créer un composant React de copier-coller

En React, on peut créer un composant réutilisable pour le copier-coller. Voici un exemple :

import { useState } from "react";

const CopyButton = ({ text }) => {
const [isCopied, setIsCopied] = useState(false);

const handleCopy = async () => {
try {
await navigator.clipboard.writeText(text);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 2000);
} catch (err) {
console.error("Erreur lors de la copie :", err);
}
};

return (
<div style={{ display: "flex", gap: "8px", padding: "20px" }}>
<input
type="text"
value={text}
readOnly
style={{ minWidth: "200px" }}
/>
<button
onClick={handleCopy}
style={{
        backgroundColor: isCopied ? "#4CAF50" : "#2196F3",
        color: "white",
        border: "none",
        padding: "8px 16px",
        borderRadius: "4px",
        cursor: "pointer"
      }} >
{isCopied ? "Copié !" : "Copier"}
</button>
</div>
);
};

export default function App() {
return (
  <div>
    <CopyButton text="Hello, je suis un texte à copier !" />
  </div>
);
}

Ce composant React :

• Utilise useState pour gérer l"état de la copie
• Affiche un feedback visuel quand le texte est copié
• Est réutilisable avec différents textes
• Gère les erreurs potentielles

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 :

• Comment utiliser le localStorage avec Next.js
• Les bases de JavaScript
• Comment utiliser les promesses en JavaScript