Како додати функцију Цопи то Цлипбоард у вашу Реацт апликацију

Ручно копирање информација, било да се ради о исечцима кода, УРЛ везама или фрагментима текста може бити дуготрајно и подложно грешкама, посебно на мобилним уређајима где је екран мали. Додавање функције „копирања у међуспремник“ не само да штеди време, већ и смањује потенцијал за грешке и грешке у куцању.

Подешавање функције копирања у међуспремник

У апликацији Реацт креирајте нову компоненту под називом ЦопиБуттон. Ова компонента прихвата текст који би требало да копира у међуспремник.

Ако немате Реацт пројекат на којем бисте радили, користите услужни програм за креирање реакције да скеле један.

functionCopyButton({text}) {
const copyToClipboard = () => {
// copy to clipboard
 }
return (
Copy</button>
 )
}
exportdefault 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);
 }
 };

Тхе вритеТект метода прихвата текст који ће копирати у међуспремник. Овај метод је асинхрони, тако да морате да користите кључну реч аваит пре него што наставите.

Ако је текст копиран у међуспремник, прикажите поруку о успеху, иначе прикажите поруку о грешци као упозорење.

Провера дозвола за прегледач

Као добра пракса, важно је осигурати да је корисник одобрио претраживачу дозволу за приступ међуспремнику. Можете проверити да ли је корисник одобрио цлипбоард-врите дозволу коришћењем навигатор.пермиссионс Веб АПИ пре копирања у међуспремник као што је приказано испод.

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

У измењеној функцији изнад, само када је корисник дао дозволу за писање у међуспремник, пише се у њега. У супротном, функција даје грешку.

Коришћење НПМ пакета за копирање у међуспремник у Реацт-у

Ако не желите да директно користите АПИ за међуспремник, постоје више НПМ пакета можете користити уместо тога. За реаговане апликације можете користити реаговати-цопи-то-цлипбоард пакет. Прилично је популаран са више од милион преузимања недељно и такође је једноставан за коришћење.

Инсталирајте га у своју Реацт апликацију тако што ћете покренути следећу команду у терминалу:

npm install react-copy-to-clipboard

Једном инсталиран, увезите ЦопиТоЦлипбоард компонента из реаговати-цопи-то-цлипбоард Инто тхе ЦопиБуттон саставни део.

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

Тхе ЦопиТоЦлипбоард компонента прихвата текст који желите да копирате као проп. Такође прихвата подређену компоненту која када се кликне покреће акцију копирања.

На пример, користите код испод да бисте копирали у међуспремник помоћу дугмета:

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

Обратите пажњу на функцију руковаоца, онЦопи. Прихвата два аргумента, текст и резултат где је текст копирани текст, а резултат је логички који означава да ли је радња копирања била успешна или не.

Зашто користити функцију Цопи то Цлипбоард?

Научили сте како да користите АПИ за међуспремник и пакет реацт-цопи-то-цлипбоард за копирање текста у међуспремник у Реацт апликацији. Док корисници ваше апликације могу једноставно да изаберу текст и користе функцију копирања вашег претраживача, клик за копирање текста је једноставнији и бољи за корисничко искуство.