Как да добавите функция за копиране в клипборда към вашето приложение React

Ръчното копиране на информация, било то кодови фрагменти, URL връзки или текстови фрагменти, може да отнеме много време и да доведе до грешки, особено на мобилни устройства, където екранът е малък. Добавянето на функция „копиране в клипборда“ не само спестява време, но и намалява потенциала за грешки и правописни грешки.

Настройване на функцията за копиране в клипборда

В приложение на React създайте нов компонент с име CopyButton. Този компонент приема текст, който трябва да копира в клипборда.

Ако нямате React проект, върху който да работите, използвайте помощната програма за създаване на приложение React да скеле едно.

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

Когато се щракне, бутонът трябва да извика функция с име копиране в клипборда който копира текста в клипборда.

За да приложите функцията за копиране, можете да използвате директно API на клипборда или да използвате NPM пакет.

Това ръководство ще ви покаже как да използвате и двете.

Използване на API на клипборда за копиране на текст в клипборда в React

The API на клипборда предоставя начин за взаимодействие с команди на клипборда като копиране, изрязване и поставяне.

За да получите достъп до него, трябва да използвате navigator.clipboard обект, наличен в повечето съвременни браузъри. Той има няколко метода, които ви позволяват да пишете или четете съдържанието на клипборда.

За да пишете в клипборда, използвайте writeText метод.

Нека видим как да приложим това в копиране в клипборда функция на 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);
 }
 };

The writeText приема текста, който ще копира в клипборда. Този метод е асинхронен, така че трябва да използвате ключовата дума await, преди да продължите.

Ако текстът е копиран в клипборда, покажете съобщение за успех, в противен случай покажете съобщението за грешка като предупреждение.

Проверка на разрешенията на браузъра

Като добра практика е важно да се уверите, че потребителят е предоставил на браузъра разрешение за достъп до клипборда. Можете да проверите дали потребителят е предоставил клипборд-запис разрешение за използване на navigator.permissions Уеб API преди копиране в клипборда, както е показано по-долу.

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 пакет за копиране в клипборда в React

Ако не искате да използвате директно API на клипборда, има множество NPM пакети можете да използвате вместо това. За приложения на React можете да използвате реагиране на копиране в клипборда пакет. Той е доста популярен с повече от 1 милион изтегляния седмично и също така е лесен за използване.

Инсталирайте го във вашето приложение React, като изпълните следната команда в терминала:

npm install react-copy-to-clipboard

Веднъж инсталиран, импортирайте Копиране в клипборда компонент от реагиране на копиране в клипборда в CopyButton компонент.

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

The Копиране в клипборда приема текста, който искате да копирате, като опора. Той също така приема дъщерен компонент, който при щракване задейства действието за копиране.

Например, използвайте кода по-долу, за да копирате в клипборда с бутон:

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

Обърнете внимание на функцията за обработка, onCopy. Приема два аргумента, текст и резултат където text е копираният текст и резултатът е булево, показващо дали действието за копиране е било успешно или не.

Защо да използвате функция за копиране в клипборда?

Научихте как да използвате API на клипборда и пакета react-copy-to-clipboard, за да копирате текст в клипборда в приложение на React. Докато потребителите на вашето приложение могат просто да изберат текста и да използват функцията за копиране на вашия браузър, щракването за копиране на текст е по-лесно и по-добро за потребителското изживяване.