So fügen Sie Ihrer React-App die Funktion „In die Zwischenablage kopieren“ hinzu

Das manuelle Kopieren von Informationen, seien es Codeschnipsel, URL-Links oder Textfragmente, kann zeitaufwändig und fehleranfällig sein, insbesondere auf Mobilgeräten mit kleinem Bildschirm. Das Hinzufügen einer „In die Zwischenablage kopieren“-Funktion spart nicht nur Zeit, sondern verringert auch das Risiko von Fehlern und Tippfehlern.

Einrichten der Funktion „In die Zwischenablage kopieren“.

Erstellen Sie in einer React-App eine neue Komponente mit dem Namen CopyButton. Diese Komponente akzeptiert Text, den sie in die Zwischenablage kopieren soll.

Wenn Sie kein React-Projekt haben, an dem Sie arbeiten können, Verwenden Sie das Dienstprogramm zum Erstellen einer React-App einen einrüsten.

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

Wenn Sie darauf klicken, sollte die Schaltfläche eine Funktion mit dem Namen aufrufen

in die Zwischenablage kopieren Dadurch wird der Text in die Zwischenablage kopiert.

Um die Kopierfunktion zu implementieren, können Sie die Clipboard-API direkt verwenden oder ein NPM-Paket verwenden.

Diese Anleitung zeigt Ihnen, wie Sie beide verwenden.

Verwenden der Clipboard-API zum Kopieren von Text in eine Zwischenablage in React

Der Zwischenablage-API Bietet eine Möglichkeit, mit Zwischenablagebefehlen wie Kopieren, Ausschneiden und Einfügen zu interagieren.

Um darauf zuzugreifen, müssen Sie die verwenden navigator.clipboard Objekt, das in den meisten modernen Browsern verfügbar ist. Es verfügt über mehrere Methoden, mit denen Sie den Inhalt der Zwischenablage schreiben oder lesen können.

Um in die Zwischenablage zu schreiben, verwenden Sie die writeText Methode.

Mal sehen, wie man das umsetzt in die Zwischenablage kopieren Funktion der CopyButton Komponente.

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

Der writeText Die Methode akzeptiert den Text, den sie in die Zwischenablage kopiert. Diese Methode ist asynchron, daher müssen Sie das Schlüsselwort „await“ verwenden, bevor Sie fortfahren können.

Wenn der Text in die Zwischenablage kopiert wird, wird eine Erfolgsmeldung angezeigt, andernfalls wird die Fehlermeldung als Warnung angezeigt.

Überprüfen der Browserberechtigungen

Als gute Vorgehensweise ist es wichtig sicherzustellen, dass der Benutzer dem Browser die Berechtigung erteilt hat, auf die Zwischenablage zuzugreifen. Sie können überprüfen, ob der Benutzer die Genehmigung erteilt hat Zwischenablage schreiben Erlaubnis mit der navigator.permissions Web-API vor dem Kopieren in die Zwischenablage, wie unten gezeigt.

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);
 }
};

In der oben modifizierten Funktion wird nur dann in die Zwischenablage geschrieben, wenn der Benutzer die Berechtigung zum Schreiben in die Zwischenablage erteilt hat. Andernfalls gibt die Funktion einen Fehler aus.

Verwenden eines NPM-Pakets zum Kopieren in die Zwischenablage in React

Wenn Sie die Zwischenablage-API nicht direkt verwenden möchten, gibt es welche mehrere NPM-Pakete Sie können stattdessen verwenden. Für Reaktionsanwendungen können Sie die verwenden React-Copy-to-Clipboard Paket. Es ist mit mehr als 1 Million wöchentlichen Downloads sehr beliebt und außerdem einfach zu bedienen.

Installieren Sie es in Ihrer React-Anwendung, indem Sie den folgenden Befehl im Terminal ausführen:

npm install react-copy-to-clipboard

Importieren Sie nach der Installation die In die Zwischenablage kopieren Komponente aus React-Copy-to-Clipboard in die CopyButton Komponente.

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

Der In die Zwischenablage kopieren Die Komponente akzeptiert den Text, den Sie kopieren möchten, als Requisite. Es akzeptiert auch eine untergeordnete Komponente, die beim Klicken die Kopieraktion auslöst.

Verwenden Sie beispielsweise den folgenden Code, um ihn mit einer Schaltfläche in die Zwischenablage zu kopieren:

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

Beachten Sie die Handler-Funktion, onCopy. Es akzeptiert zwei Argumente: Text Und Ergebnis Dabei ist Text der kopierte Text und das Ergebnis ist ein boolescher Wert, der angibt, ob der Kopiervorgang erfolgreich war oder nicht.

Warum die Funktion „In die Zwischenablage kopieren“ verwenden?

Sie haben gelernt, wie Sie die Clipboard-API und das React-Copy-to-Clipboard-Paket verwenden, um Text in die Zwischenablage in einer React-Anwendung zu kopieren. Während die Benutzer Ihrer Anwendung einfach den Text auswählen und die Kopierfunktion Ihres Browsers verwenden können, ist das Klicken zum Kopieren von Text einfacher und für die Benutzererfahrung besser.