Copierea manuală a informațiilor, fie că este vorba de fragmente de cod, linkuri URL sau fragmente de text, poate fi consumatoare de timp și predispusă la erori, în special pe dispozitivele mobile unde ecranul este mic. Adăugarea unei funcționalități de „copiere în clipboard” nu numai că economisește timp, dar reduce și potențialul de erori și greșeli de scriere.
Cuprins
Configurarea funcției Copiere în Clipboard
Într-o aplicație React, creați o componentă nouă numită CopyButton. Această componentă acceptă text pe care ar trebui să îl copieze în clipboard.
Dacă nu aveți un proiect React la care să lucrați, utilizați utilitarul de creare a aplicației react pentru a crea unul.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}export default CopyButton
Când este făcut clic, butonul ar trebui să apeleze o funcție numită copyToClipboard care copiază textul în clipboard.
Pentru a implementa funcționalitatea de copiere, puteți utiliza direct API-ul clipboard sau puteți utiliza un pachet NPM.
Acest ghid vă va arăta cum să le utilizați pe ambele.
Utilizarea API-ului Clipboard pentru a copia textul într-un Clipboard în React
The Clipboard API oferă o modalitate de a interacționa cu comenzile din clipboard, cum ar fi copierea, tăierea și lipirea.
Pentru a-l accesa, trebuie să utilizați obiectul navigator.clipboard disponibil în majoritatea browserelor moderne. Are mai multe metode care vă permit să scrieți sau să citiți conținutul clipboard-ului.
Pentru a scrie în clipboard, utilizați metoda writeText.
Să vedem cum să implementăm acest lucru în funcția copyToClipboard a componentei CopyButton.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Text copied to clipboard:', text);
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
Metoda writeText acceptă textul pe care îl va copia în clipboard. Această metodă este asincronă, așa că trebuie să utilizați cuvântul cheie await înainte de a continua.
Dacă textul este copiat în clipboard, afișați un mesaj de succes, altfel afișați mesajul de eroare ca alertă.
Verificarea permisiunilor browserului
Ca bună practică, este important să vă asigurați că utilizatorul a acordat browserului permisiunea de a accesa clipboard-ul. Puteți verifica dacă utilizatorul a acordat permisiunea de scriere în clipboard folosind navigator.permissions Web API înainte de a copia în clipboard, așa cum se arată mai jos.
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 {
throw new Error("Can't access the clipboard. Check your browser permissions.")
}
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
În funcția modificată de mai sus, doar atunci când utilizatorul a acordat permisiunea de a scrie în clipboard, scrie în acesta. În caz contrar, funcția aruncă o eroare.
Utilizarea unui pachet NPM pentru a copia în Clipboard în React
Dacă nu doriți să utilizați direct API-ul clipboard, există mai multe pachete NPM pe care le puteți utiliza în schimb. Pentru aplicațiile react, puteți utiliza reacţionează-copie-în-clipboard pachet. Este destul de popular, cu peste 1 milion de descărcări săptămânale și este, de asemenea, ușor de utilizat.
Instalați-l în aplicația dvs. React rulând următoarea comandă în terminal:
npm install react-copy-to-clipboard
Odată instalat, importați componenta CopyToClipboard din react-copy-to-clipboard în componenta CopyButton.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Componenta CopyToClipboard acceptă textul pe care doriți să-l copiați ca prop. De asemenea, acceptă o componentă secundară care, atunci când este făcută clic, declanșează acțiunea de copiere.
De exemplu, utilizați codul de mai jos pentru a copia în clipboard cu un buton:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
Rețineți funcția de gestionare, onCopy. Acceptă două argumente, text și rezultat, unde text este textul copiat și rezultatul este un boolean care indică dacă acțiunea de copiere a avut succes sau nu.
De ce să folosiți o funcție Copiere în Clipboard?
Ați învățat cum să utilizați API-ul clipboard și pachetul react-copy-to-clipboard pentru a copia text în clipboard într-o aplicație React. În timp ce utilizatorii aplicației dvs. pot pur și simplu să selecteze textul și să utilizeze funcționalitatea de copiere a browserului dvs., să faceți clic pentru a copia textul este mai simplu și mai bun pentru experiența utilizatorului.