Kuidas lisada oma Reacti rakendusele lõikelauale koopia

Teabe, olgu selleks koodilõigud, URL-i lingid või tekstifragmendid, käsitsi kopeerimine võib olla aeganõudev ja vigadetundlik, eriti mobiilseadmetes, kus ekraan on väike. Lõikelauale kopeerimise funktsiooni lisamine mitte ainult ei säästa aega, vaid vähendab ka vigade ja kirjavigade võimalust.

Lõikelauale kopeerimise funktsiooni seadistamine

Looge rakenduses React uus komponent nimega Kopeerimisnupp. See komponent aktsepteerib teksti, mille see peaks lõikepuhvrisse kopeerima.

Kui teil pole Reacti projekti, mille kallal töötada, kasutage utiliiti Loo reageerida ühe tellingute tegemiseks.

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

Klõpsamisel peaks nupp kutsuma funktsiooni nimega kopeerida lõikelauale mis kopeerib teksti lõikepuhvrisse.

Kopeerimisfunktsiooni rakendamiseks saate kasutada otse lõikepuhvri API-d või kasutada NPM-paketti.

See juhend näitab teile, kuidas mõlemat kasutada.

Lõikelaua API kasutamine teksti kopeerimiseks Reacti lõikelauale

The Lõikelaua API pakub võimalust suhelda lõikelaua käskudega, nagu kopeerimine, lõikamine ja kleepimine.

Sellele juurdepääsu saamiseks peate kasutama navigaator.lõikelaud enamikus kaasaegsetes brauserites saadaval olev objekt. Sellel on mitu meetodit, mis võimaldavad teil lõikepuhvri sisu kirjutada või lugeda.

Lõikepuhvrisse kirjutamiseks kasutage nuppu kirjuta tekst meetod.

Vaatame, kuidas seda rakenduses rakendada kopeerida lõikelauale funktsioon Kopeerimisnupp komponent.

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 kirjuta tekst meetod aktsepteerib teksti, mille see lõikelauale kopeerib. See meetod on asünkroonne, seega peate enne edasiliikumist kasutama märksõna ootama.

Kui tekst kopeeritakse lõikepuhvrisse, kuvage eduteade, vastasel juhul kuvatakse tõrketeade hoiatusena.

Brauseri õiguste kontrollimine

Hea tava kohaselt on oluline tagada, et kasutaja on andnud brauserile loa juurdepääsuks lõikelauale. Saate kontrollida, kas kasutaja on lubanud lõikelauale kirjutamine luba kasutades navigator.permissions Web API enne lõikepuhvrisse kopeerimist, nagu allpool näidatud.

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

Ülaltoodud muudetud funktsioonis kirjutab sellele ainult siis, kui kasutaja on andnud loa lõikepuhvrisse kirjutada. Vastasel juhul annab funktsioon välja vea.

NPM-paketi kasutamine Reactis lõikelauale kopeerimiseks

Kui te ei soovi lõikelaua API-t otse kasutada, on olemas mitu NPM-paketti võite selle asemel kasutada. Reageerimisrakenduste jaoks saate kasutada reageeri-kopeeri-lõikepuhvrisse pakett. See on üsna populaarne enam kui 1 miljoni nädalase allalaadimisega ja seda on ka lihtne kasutada.

Installige see oma Reacti rakendusse, käivitades terminalis järgmise käsu:

npm install react-copy-to-clipboard

Pärast installimist importige Kopeerida lõikelauale komponent pärit reageeri-kopeeri-lõikepuhvrisse sisse Kopeerimisnupp komponent.

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

The Kopeerida lõikelauale komponent aktsepteerib teksti, mida soovite kopeerida rekvisiidina. Samuti aktsepteerib see alamkomponenti, millel klõpsamine käivitab kopeerimistoimingu.

Näiteks kasutage allolevat koodi, et kopeerida lõikepuhvrisse nupuga:

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

Pange tähele käitleja funktsiooni, onCopy. See võtab vastu kaks argumenti, tekst ja tulemus kus tekst on kopeeritud tekst ja tulemuseks on tõeväärtus, mis näitab, kas kopeerimistoiming õnnestus või mitte.

Miks kasutada lõikelauale kopeerimise funktsiooni?

Olete õppinud kasutama lõikepuhvri API-t ja paketti React-copy-to-clipboard teksti kopeerimiseks Reacti rakenduse lõikepuhvrisse. Kuigi teie rakenduse kasutajad saavad lihtsalt teksti valida ja kasutada teie brauseri kopeerimisfunktsiooni, on teksti kopeerimiseks klõpsamine lihtsam ja kasutajakogemuse jaoks parem.