Kako dodati značajku kopiranja u međuspremnik vašoj aplikaciji React

Ručno kopiranje informacija, bilo da se radi o isječcima koda, URL vezama ili fragmentima teksta, može oduzimati puno vremena i podložno pogreškama, osobito na mobilnim uređajima s malim zaslonom. Dodavanje funkcije "kopiraj u međuspremnik" ne samo da štedi vrijeme, već i smanjuje mogućnost pogrešaka i tipfelera.

Postavljanje funkcije kopiranja u međuspremnik

U aplikaciji React stvorite novu komponentu pod nazivom CopyButton. Ova komponenta prihvaća tekst koji treba kopirati u međuspremnik.

Ako nemate React projekt na kojem biste radili, koristite uslužni program za kreiranje reakcije aplikacije na skelu jednu.

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

Kada se klikne, gumb bi trebao pozvati funkciju pod nazivom kopirati u međuspremnik koji kopira tekst u međuspremnik.

Za implementaciju funkcije kopiranja možete izravno koristiti API međuspremnika ili koristiti NPM paket.

Ovaj će vam vodič pokazati kako koristiti oboje.

Korištenje Clipboard API-ja za kopiranje teksta u međuspremnik u Reactu

The API međuspremnika pruža način interakcije s naredbama međuspremnika kao što su kopiranje, izrezivanje i lijepljenje.

Da biste mu pristupili, morate koristiti navigator.međuspremnik objekt dostupan u većini modernih preglednika. Ima nekoliko metoda koje vam omogućuju pisanje ili čitanje sadržaja međuspremnika.

Za pisanje u međuspremnik koristite napisatiTekst metoda.

Pogledajmo kako to implementirati u kopirati u međuspremnik funkcija CopyButton komponenta.

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

The napisatiTekst metoda prihvaća tekst koji će kopirati u međuspremnik. Ova metoda je asinkrona, pa morate upotrijebiti ključnu riječ čekanja prije nego krenete dalje.

Ako se tekst kopira u međuspremnik, prikaži poruku o uspjehu, inače prikaži poruku o pogrešci kao upozorenje.

Provjera dopuštenja preglednika

Kao dobra praksa, važno je osigurati da je korisnik pregledniku dao dopuštenje za pristup međuspremniku. Možete provjeriti je li korisnik odobrio međuspremnik-pisati dopuštenje za korištenje navigator.dopuštenja Web API prije kopiranja u međuspremnik kao što je prikazano u nastavku.

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

U gornjoj izmijenjenoj funkciji, samo kada je korisnik dao dopuštenje za pisanje u međuspremnik, piše se u njega. U suprotnom, funkcija daje pogrešku.

Korištenje NPM paketa za kopiranje u međuspremnik u Reactu

Ako ne želite izravno koristiti API međuspremnika, postoje više NPM paketa možete koristiti umjesto toga. Za react aplikacije možete koristiti react-copy-to-clipboard paket. Prilično je popularan s više od milijun preuzimanja tjedno, a također je jednostavan za korištenje.

Instalirajte ga u svoju React aplikaciju pokretanjem sljedeće naredbe na terminalu:

npm install react-copy-to-clipboard

Nakon instaliranja, uvezite Kopirati u međuspremnik komponenta iz react-copy-to-clipboard u CopyButton komponenta.

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

The Kopirati u međuspremnik komponenta prihvaća tekst koji želite kopirati kao prop. Također prihvaća podređenu komponentu koja kada se klikne pokreće radnju kopiranja.

Na primjer, upotrijebite donji kod za kopiranje u međuspremnik pomoću gumba:

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

Obratite pažnju na funkciju rukovatelja, onCopy. Prihvaća dva argumenta, tekst i proizlaziti gdje je tekst kopirani tekst, a rezultat je booleov koji pokazuje je li akcija kopiranja bila uspješna ili ne.

Zašto koristiti funkciju kopiranja u međuspremnik?

Naučili ste kako koristiti API za međuspremnik i paket react-copy-to-clipboard za kopiranje teksta u međuspremnik u React aplikaciji. Dok korisnici vaše aplikacije mogu jednostavno odabrati tekst i koristiti funkciju kopiranja vašeg preglednika, klikanje za kopiranje teksta je jednostavnije i bolje za korisničko iskustvo.