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

Копирование информации вручную, будь то фрагменты кода, URL-ссылки или фрагменты текста, может занять много времени и привести к ошибкам, особенно на мобильных устройствах с небольшим экраном. Добавление функции «копировать в буфер обмена» не только экономит время, но и снижает вероятность ошибок и опечаток.

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

В приложении React создайте новый компонент с именем КопироватьКнопку. Этот компонент принимает текст, который он должен скопировать в буфер обмена.

Если у вас нет проекта React, над которым можно работать, используйте утилиту создания приложения React возвести один.

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

При нажатии кнопка должна вызывать функцию с именем скопировать в буфер обмена который копирует текст в буфер обмена.

Чтобы реализовать функцию копирования, вы можете напрямую использовать API буфера обмена или использовать пакет NPM.

Это руководство покажет вам, как использовать оба.

Использование API буфера обмена для копирования текста в буфер обмена в React

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

Чтобы получить к нему доступ, вам необходимо использовать навигатор.буфер обмена объект доступен в большинстве современных браузеров. Он имеет несколько методов, позволяющих записывать или читать содержимое буфера обмена.

Для записи в буфер обмена используйте команду записьтекста метод.

Давайте посмотрим, как это реализовать в скопировать в буфер обмена функция КопироватьКнопка компонент.

const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
 alert('Text copied to clipboard:', text);
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
 };

записьтекста метод принимает текст, который он скопирует в буфер обмена. Этот метод является асинхронным, поэтому вам необходимо использовать ключевое слово 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 вы можете использовать вместо этого. Для реагирующих приложений вы можете использовать реакция на копирование в буфер обмена упаковка. Он довольно популярен: его еженедельно загружают более 1 миллиона раз, а также он прост в использовании.

Установите его в свое приложение React, выполнив в терминале следующую команду:

npm install react-copy-to-clipboard

После установки импортируйте Скопировать в буфер обмена компонент из реакция на копирование в буфер обмена в КопироватьКнопка компонент.

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

Скопировать в буфер обмена компонент принимает текст, который вы хотите скопировать, в качестве реквизита. Он также принимает дочерний компонент, который при нажатии запускает действие копирования.

Например, используйте приведенный ниже код для копирования в буфер обмена с помощью кнопки:

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

Обратите внимание на функцию-обработчик, onCopy. Он принимает два аргумента, текст и результат где текст — это скопированный текст, а результат — логическое значение, указывающее, было ли действие копирования успешным или нет.

Зачем использовать функцию копирования в буфер обмена?

Вы узнали, как использовать API буфера обмена и пакет реагирования на копирование в буфер обмена для копирования текста в буфер обмена в приложении React. Хотя пользователи вашего приложения могут просто выбрать текст и использовать функцию копирования вашего браузера, скопировать текст нажатием кнопки проще и удобнее для пользователя.