Ručno prenošenje podataka, kao što su isečci koda, URL adrese ili delovi teksta, može biti naporno i sklono greškama, naročito na mobilnim uređajima sa manjim ekranima. Dodavanje opcije „kopiraj u međuspremnik“ ne samo da štedi vreme, već i smanjuje šansu za greške i pogrešno kucanje.
Konfigurisanje funkcije kopiranja u međuspremnik
U React aplikaciji, napravite novu komponentu pod nazivom CopyButton. Ova komponenta prima tekst koji treba da se kopira u međuspremnik.
Ukoliko nemate React projekat na kojem biste radili, iskoristite alat za kreiranje React aplikacije da biste ga podesili.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}
export default CopyButton
Kada se klikne, dugme treba da pozove funkciju nazvanu copyToClipboard koja prebacuje tekst u međuspremnik.
Za implementaciju funkcije kopiranja, možete direktno koristiti Clipboard API ili iskoristiti NPM paket.
Ovaj vodič će vam pokazati kako da upotrebite oba načina.
Upotreba Clipboard API-ja za prenos teksta u međuspremnik u React-u
Clipboard API nudi način za interakciju sa operacijama međuspremnika kao što su kopiranje, sečenje i lepljenje.
Da biste mu pristupili, treba da upotrebite objekat navigator.clipboard koji je dostupan u većini savremenih pregledača. On sadrži razne metode koje omogućavaju pisanje ili čitanje sadržaja međuspremnika.
Da biste upisali u međuspremnik, upotrebite metod writeText.
Pogledajmo kako se to implementira u funkciji copyToClipboard komponente CopyButton.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Tekst je kopiran u međuspremnik:', text);
} catch (error) {
alert('Greška pri kopiranju u međuspremnik:', error);
}
};
Metod writeText prihvata tekst koji treba da se prebaci u međuspremnik. Ovaj metod je asinhron, pa je potrebno koristiti ključnu reč await pre nastavka.
Ukoliko je tekst uspešno kopiran u međuspremnik, prikažite poruku o uspehu, u suprotnom prikažite poruku o grešci kao upozorenje.
Provera dozvola pretraživača
Kao dobra praksa, bitno je proveriti da li je korisnik dozvolio pretraživaču pristup međuspremniku. Možete proveriti da li je korisnik dao dozvolu za upisivanje u međuspremnik korišćenjem navigator.permissions Web API-ja pre kopiranja u međuspremnik, kao što je prikazano ispod.
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('Tekst je kopiran u međuspremnik!');
} else {
throw new Error("Nije moguće pristupiti međuspremniku. Proverite dozvole pretraživača.")
}
} catch (error) {
alert('Greška pri kopiranju u međuspremnik:', error);
}
};
U izmenjenoj funkciji iznad, samo kada je korisnik dao dozvolu za pisanje u međuspremnik, vrši se upisivanje u njega. U suprotnom, funkcija vraća grešku.
Upotreba NPM paketa za kopiranje u međuspremnik u React-u
Ukoliko ne želite direktno da koristite Clipboard API, na raspolaganju vam je nekoliko NPM paketa koje možete iskoristiti. Za React aplikacije, možete koristiti react-copy-to-clipboard paket. On je veoma popularan sa više od milion preuzimanja nedeljno i jednostavan je za upotrebu.
Instalirajte ga u vašu React aplikaciju pokretanjem sledeće komande u terminalu:
npm install react-copy-to-clipboard
Kada se instalira, uvezite komponentu CopyToClipboard iz react-copy-to-clipboard u vašu CopyButton komponentu.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Komponenta CopyToClipboard prihvata tekst koji želite da kopirate kao parametar (prop). Takođe, prihvata i potkomponentu koja, kada se klikne, pokreće akciju kopiranja.
Na primer, koristite kod ispod za kopiranje u međuspremnik pomoću dugmeta:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
Obratite pažnju na funkciju onCopy. Ona prihvata dva argumenta, tekst i rezultat, gde je tekst, tekst koji je kopiran, a rezultat je logička vrednost koja ukazuje da li je akcija kopiranja bila uspešna ili ne.
Zašto koristiti funkciju Copy to Clipboard?
Naučili ste kako da koristite Clipboard API i paket react-copy-to-clipboard za prebacivanje teksta u međuspremnik u React aplikaciji. Iako korisnici vaše aplikacije mogu jednostavno da selektuju tekst i koriste funkciju kopiranja svog pretraživača, klik za kopiranje teksta je jednostavniji i bolji za korisničko iskustvo.