Ручно копирање информација, било да се ради о исечцима кода, УРЛ везама или фрагментима текста може бити дуготрајно и подложно грешкама, посебно на мобилним уређајима где је екран мали. Додавање функције „копирања у међуспремник“ не само да штеди време, већ и смањује потенцијал за грешке и грешке у куцању.
Преглед садржаја
Подешавање функције копирања у међуспремник
У Реацт апликацији направите нову компоненту под називом ЦопиБуттон. Ова компонента прихвата текст који би требало да копира у међуспремник.
Ако немате Реацт пројекат на коме бисте радили, користите услужни програм за креирање реаговања да бисте га поставили.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}export default 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 {
throw new Error("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';
Компонента ЦопиТоЦлипбоард прихвата текст који желите да копирате као реквизит. Такође прихвата подређену компоненту која када се кликне покреће акцију копирања.
На пример, користите код испод да бисте копирали у међуспремник помоћу дугмета:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
Обратите пажњу на функцију руковаоца, онЦопи. Прихвата два аргумента, текст и резултат где је текст копирани текст, а резултат је логички који показује да ли је радња копирања била успешна или не.
Зашто користити функцију Цопи то Цлипбоард?
Научили сте како да користите АПИ за међуспремник и пакет реацт-цопи-то-цлипбоард за копирање текста у међуспремник у Реацт апликацији. Док корисници ваше апликације могу једноставно да изаберу текст и користе функцију копирања вашег претраживача, клик за копирање текста је једноставнији и бољи за корисничко искуство.