Kā savai React lietotnei pievienot kopiju starpliktuvē

Manuāla informācijas kopēšana, neatkarīgi no tā, vai tie ir koda fragmenti, URL saites vai teksta fragmenti, var būt laikietilpīga un kļūdu iespējamība, īpaši mobilajās ierīcēs, kur ekrāns ir mazs. Funkcijas “kopēšana starpliktuvē” pievienošana ne tikai ietaupa laiku, bet arī samazina kļūdu un drukas kļūdu iespējamību.

Kopēšanas starpliktuvē funkcionalitātes iestatīšana

React lietotnē izveidojiet jaunu komponentu ar nosaukumu Poga Kopēt. Šis komponents pieņem tekstu, kas tam jākopē starpliktuvē.

Ja jums nav React projekta, pie kura strādāt, izmantojiet utilītu Create React App lai sastatnes vienu.

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

Noklikšķinot, pogai ir jāizsauc funkcija ar nosaukumu kopēt starpliktuvē kas kopē tekstu starpliktuvē.

Lai ieviestu kopēšanas funkcionalitāti, varat tieši izmantot starpliktuves API vai izmantot NPM pakotni.

Šī rokasgrāmata parādīs, kā izmantot abus.

Izmantojot starpliktuves API, lai kopētu tekstu starpliktuvē programmā React

The Starpliktuves API nodrošina veidu, kā mijiedarboties ar starpliktuves komandām, piemēram, kopēt, izgriezt un ielīmēt.

Lai tai piekļūtu, jums ir jāizmanto navigators.starpliktuve objekts ir pieejams lielākajā daļā mūsdienu pārlūkprogrammu. Tam ir vairākas metodes, kas ļauj rakstīt vai lasīt starpliktuves saturu.

Lai rakstītu starpliktuvē, izmantojiet rakstītTekstu metodi.

Apskatīsim, kā to īstenot kopēt starpliktuvē funkcija Poga Kopēt komponents.

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 rakstītTekstu metode pieņem tekstu, ko tā kopēs starpliktuvē. Šī metode ir asinhrona, tāpēc pirms pāriešanas ir jāizmanto gaidīšanas atslēgvārds.

Ja teksts tiek kopēts starpliktuvē, parādiet veiksmes ziņojumu, pretējā gadījumā kļūdas ziņojums tiek rādīts kā brīdinājums.

Pārlūkprogrammas atļauju pārbaude

Kā laba prakse ir svarīgi nodrošināt, lai lietotājs būtu piešķīris pārlūkprogrammai atļauju piekļūt starpliktuvei. Varat pārbaudīt, vai lietotājs ir piešķīris starpliktuve-rakstīt atļauja, izmantojot navigator.permissions Web API pirms kopēšanas starpliktuvē, kā parādīts tālāk.

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

Iepriekš modificētajā funkcijā tikai tad, kad lietotājs ir piešķīris atļauju rakstīt starpliktuvē, tajā raksta. Pretējā gadījumā funkcija rada kļūdu.

NPM pakotnes izmantošana, lai kopētu starpliktuvē programmā React

Ja nevēlaties tieši izmantot starpliktuves API, ir tādas vairākas NPM pakotnes tā vietā varat izmantot. React lietojumprogrammām varat izmantot reaģēt, kopēt starpliktuvē iepakojums. Tas ir diezgan populārs ar vairāk nekā 1 miljonu nedēļas lejupielāžu, un to ir arī viegli lietot.

Instalējiet to savā React lietojumprogrammā, terminālī izpildot šādu komandu:

npm install react-copy-to-clipboard

Kad tas ir instalēts, importējiet Kopēt starpliktuvē komponents no reaģēt, kopēt starpliktuvē iekšā Poga Kopēt komponents.

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

The Kopēt starpliktuvē komponents pieņem tekstu, kuru vēlaties kopēt kā rekvizītu. Tā pieņem arī pakārtoto komponentu, kas, noklikšķinot, aktivizē kopēšanas darbību.

Piemēram, izmantojiet tālāk norādīto kodu, lai kopētu starpliktuvē ar pogu:

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

Ņemiet vērā apstrādātāja funkciju, onCopy. Tā pieņem divus argumentus, tekstu un rezultāts kur teksts ir kopētais teksts, un rezultāts ir Būla vērtība, kas norāda, vai kopēšanas darbība bija veiksmīga.

Kāpēc izmantot funkciju Kopēt starpliktuvē?

Jūs esat iemācījies izmantot starpliktuves API un pakotni reaģēt, kopēt starpliktuvē, lai kopētu tekstu starpliktuvē React lietojumprogrammā. Lai gan jūsu lietojumprogrammas lietotāji var vienkārši atlasīt tekstu un izmantot jūsu pārlūkprogrammas kopēšanas funkcionalitāti, noklikšķināšana, lai kopētu tekstu, ir vienkāršāka un labāka lietotāja pieredzei.