Ручне копіювання інформації, будь то фрагменти коду, URL-посилання чи текстові фрагменти, може зайняти багато часу та бути схильним до помилок, особливо на мобільних пристроях із маленьким екраном. Додавання функції «копіювати в буфер обміну» не тільки економить час, але й зменшує ймовірність помилок і друкарських помилок.
Налаштування функції копіювання в буфер обміну
У програмі React створіть новий компонент під назвою CopyButton. Цей компонент приймає текст, який він має скопіювати в буфер обміну.
Якщо у вас немає проекту React для роботи, скористайтеся утилітою create react app, щоб створити його.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}export default CopyButton
Після натискання кнопка повинна викликати функцію copyToClipboard, яка копіює текст у буфер обміну.
Щоб реалізувати функцію копіювання, ви можете безпосередньо використовувати API буфера обміну або використовувати пакет NPM.
Цей посібник покаже вам, як використовувати обидва.
Використання Clipboard API для копіювання тексту в буфер обміну в React
The API буфера обміну забезпечує спосіб взаємодії з командами буфера обміну, такими як копіювання, вирізання та вставлення.
Щоб отримати доступ до нього, вам потрібно використовувати об’єкт navigator.clipboard, доступний у більшості сучасних браузерів. Він має кілька методів, які дозволяють записувати або читати вміст буфера обміну.
Для запису в буфер обміну використовуйте метод writeText.
Давайте подивимося, як реалізувати це у функції copyToClipboard компонента 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);
}
};
Метод writeText приймає текст, який він копіює в буфер обміну. Цей метод є асинхронним, тому вам потрібно використовувати ключове слово await, перш ніж рухатися далі.
Якщо текст скопійовано до буфера обміну, відобразити повідомлення про успішне виконання, інакше відобразити повідомлення про помилку як сповіщення.
Перевірка дозволів браузера
Як хорошу практику, важливо переконатися, що користувач надав веб-переглядачу дозвіл на доступ до буфера обміну. Ви можете перевірити, чи надав користувач дозвіл на запис у буфер обміну за допомогою веб-інтерфейсу API navigator.permissions перед копіюванням у буфер обміну, як показано нижче.
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 для копіювання в буфер обміну в React
Якщо ви не хочете безпосередньо використовувати API буфера обміну, замість цього можна використовувати декілька пакетів NPM. Для програм React ви можете використовувати react-copy-to-clipboard пакет. Він досить популярний із більш ніж 1 мільйоном завантажень на тиждень, а також простий у використанні.
Встановіть його у свій додаток React, виконавши таку команду в терміналі:
npm install react-copy-to-clipboard
Після встановлення імпортуйте компонент CopyToClipboard із react-copy-to-clipboard у компонент CopyButton.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Компонент CopyToClipboard приймає текст, який ви хочете скопіювати, як проп. Він також приймає дочірній компонент, який при натисканні запускає дію копіювання.
Наприклад, скористайтеся наведеним нижче кодом, щоб скопіювати в буфер обміну за допомогою кнопки:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
Зверніть увагу на функцію обробки onCopy. Він приймає два аргументи, текст і результат, де текст є скопійованим текстом, а результат є логічним значенням, яке вказує, чи була копіювання успішною чи ні.
Навіщо використовувати функцію копіювання в буфер обміну?
Ви навчилися використовувати API буфера обміну та пакет react-copy-to-clipboard для копіювання тексту в буфер обміну в програмі React. У той час як користувачі вашої програми можуть просто вибрати текст і скористатися функцією копіювання вашого браузера, клацання для копіювання тексту є більш простим і кращим для взаємодії з користувачем.