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

19/01/2025 • Melvynx

Loading...

Content

  • Comment fonctionne le copier-coller sur le web ?
  • Les différentes méthodes pour copier-coller
  • Créer un bouton copier-coller en HTML/JavaScript
  • Créer un composant React de copier-coller

Courses

  • Formation React
  • Formation JavaScript
  • Formation Tailwind
  • Formation NextJS Full-Stack
  • Formation AI (Cursor / Copilot)
  • Formation HTML/CSS

Products

  • Codeline
  • Chat2Code
  • QuizUp
  • NOW.TS
  • Lumail
  • SaveIt.now
  • PadelTally.com

Popular articles

  • Mon année 2024
  • Mon année 2025
  • All articles

Categories

  • CSSCSS
  • HTMLHTML
  • JavaScriptJavaScript
  • Next.jsNext.js
  • ReactReact
  • TypeScriptTypeScript
codelynx.dev
Terms & Conditions•Privacy Policy•Refund Policy

Copyright © 2025 Codelynx LLC. All rights reserved.

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

L"API Clipboard nécessite que ton site soit servi en HTTPS ou soit en localhost pour des raisons de sécurité.

Les différentes méthodes pour copier-coller

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

  1. L"API Clipboard moderne :
JAVASCRIPT
await navigator.clipboard.writeText("Texte à copier");
  1. La méthode legacy (compatible avec les anciens navigateurs) :
JAVASCRIPT
const element
=
document.
createElement
(
"textarea"
);
element.value = "Texte à copier";
document.body.appendChild(element);
element.select();
document.execCommand("copy");
document.body.removeChild(element);
  1. La méthode avec un élément input :
JAVASCRIPT
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>
Open on CodeSandboxOpen Sandbox

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>
);
}
Open on CodeSandboxOpen Sandbox

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

Pour 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 :

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