Hoe u de functie Kopiëren naar klembord kunt toevoegen aan uw React-app

Het handmatig kopiëren van informatie, of het nu gaat om codefragmenten, URL-links of tekstfragmenten, kan tijdrovend en foutgevoelig zijn, vooral op mobiele apparaten met een klein scherm. Het toevoegen van een functie voor kopiëren naar klembord bespaart niet alleen tijd, maar verkleint ook de kans op fouten en typefouten.

De functionaliteit voor kopiëren naar klembord instellen

Maak in een React-app een nieuwe component met de naam Kopieerknop. Deze component accepteert tekst die naar het klembord moet worden gekopieerd.

Als u geen React-project heeft om aan te werken, gebruik het create react app-hulpprogramma om er een te steigeren.

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

Wanneer erop wordt geklikt, moet de knop een functie aanroepen met de naam Kopieer naar klembord waarmee de tekst naar het klembord wordt gekopieerd.

Om de kopieerfunctionaliteit te implementeren, kunt u de klembord-API rechtstreeks gebruiken of een NPM-pakket gebruiken.

Deze handleiding laat u zien hoe u beide kunt gebruiken.

De Klembord-API gebruiken om tekst naar een klembord te kopiëren in React

De Klembord-API biedt een manier om te communiceren met klembordopdrachten zoals kopiëren, knippen en plakken.

Om toegang te krijgen, moet u de navigator.klembord object beschikbaar in de meeste moderne browsers. Het heeft verschillende methoden waarmee u de inhoud van het klembord kunt schrijven of lezen.

Om naar het klembord te schrijven, gebruikt u de schrijfTekst methode.

Laten we eens kijken hoe we dit kunnen implementeren in de Kopieer naar klembord functie van de Kopieerknop bestanddeel.

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

De schrijfTekst methode accepteert de tekst die naar het klembord wordt gekopieerd. Deze methode is asynchroon, dus u moet het trefwoord await gebruiken voordat u verder gaat.

Als de tekst naar het klembord wordt gekopieerd, geeft u een succesbericht weer, anders geeft u het foutbericht weer als waarschuwing.

Browsermachtigingen controleren

Als goede gewoonte is het belangrijk ervoor te zorgen dat de gebruiker de browser toestemming heeft gegeven voor toegang tot het klembord. U kunt controleren of de gebruiker toestemming heeft gegeven klembord-schrijven toestemming met behulp van de navigator.rechten Web API voordat u naar het klembord kopieert, zoals hieronder weergegeven.

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 de gewijzigde functie hierboven wordt er alleen naar geschreven als de gebruiker toestemming heeft gegeven om naar het klembord te schrijven. Anders genereert de functie een fout.

Een NPM-pakket gebruiken om in React naar het klembord te kopiëren

Als u de klembord-API niet rechtstreeks wilt gebruiken, zijn er die meerdere NPM-pakketten je kunt in plaats daarvan gebruiken. Voor react-toepassingen kunt u de reageer-kopie-naar-klembord pakket. Het is behoorlijk populair met meer dan 1 miljoen wekelijkse downloads en is ook gemakkelijk te gebruiken.

Installeer het in uw React-applicatie door de volgende opdracht in de terminal uit te voeren:

npm install react-copy-to-clipboard

Na installatie importeert u het Kopieer naar klembord bestanddeel uit reageer-kopie-naar-klembord in de Kopieerknop bestanddeel.

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

De Kopieer naar klembord component accepteert de tekst die u wilt kopiëren als rekwisiet. Het accepteert ook een onderliggende component die, wanneer erop wordt geklikt, de kopieeractie activeert.

Gebruik bijvoorbeeld onderstaande code om met een knop naar het klembord te kopiëren:

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

Let op de handlerfunctie, op Kopiëren. Het aanvaardt twee argumenten, tekst En resultaat waarbij tekst de gekopieerde tekst is en het resultaat een boolean is die aangeeft of de kopieeractie succesvol was of niet.

Waarom een ​​functie Kopiëren naar Klembord gebruiken?

Je hebt geleerd hoe je de klembord-API en het react-copy-to-clipboard-pakket kunt gebruiken om tekst naar het klembord te kopiëren in een React-toepassing. Terwijl de gebruikers van uw applicatie eenvoudig de tekst kunnen selecteren en de kopieerfunctionaliteit van uw browser kunnen gebruiken, is klikken om tekst te kopiëren eenvoudiger en beter voor de gebruikerservaring.