Як додати функцію копіювання в буфер обміну до вашого додатка React

Ручне копіювання різноманітної інформації, чи то уривки коду, веб-адреси або текстові фрагменти, може вимагати значного часу та призводити до помилок, особливо на мобільних пристроях з обмеженим розміром екрана. Інтеграція функції “копіювати до буфера обміну” не лише заощадить час користувачів, але й суттєво зменшить ймовірність виникнення неточностей та друкарських помилок.

Впровадження функціональності копіювання до буфера обміну

У вашому React-проєкті створіть новий компонент, який можна назвати, наприклад, CopyButton. Цей компонент буде приймати текст як вхідні дані, який в подальшому має бути скопійований у буфер обміну.

Якщо у вас ще немає готового проєкту React, ви можете скористатися утилітою create react app для його швидкого створення.

function CopyButton({text}) {
  const copyToClipboard = () => {
  }
  return (
    <button onClick={copyToClipboard}>Копіювати</button>
  )
}
export default CopyButton

При натисканні на кнопку повинна спрацьовувати функція copyToClipboard, яка відповідає за перенесення тексту в буфер обміну.

Для реалізації копіювання можна скористатись API буфера обміну безпосередньо або ж вдатися до використання npm-пакетів.

Далі розглянемо обидва підходи.

Застосування Clipboard API для копіювання тексту в React

API буфера обміну забезпечує механізм для взаємодії з командами буфера обміну, такими як копіювання, вирізання та вставка.

Для доступу до цього API використовується об’єкт navigator.clipboard, який підтримується більшістю сучасних браузерів. Цей об’єкт надає різноманітні методи для запису або зчитування вмісту буфера обміну.

Для запису інформації до буфера обміну необхідно використовувати метод writeText.

Розглянемо, як це можна реалізувати в рамках функції copyToClipboard компонента CopyButton.

const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    alert('Текст скопійовано до буфера обміну:', text);
  } catch (error) {
    alert('Помилка копіювання до буфера обміну:', 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('Текст скопійовано до буфера обміну!');
    } else {
      throw new Error("Немає доступу до буфера обміну. Перевірте дозволи браузера.")
    }
  } catch (error) {
    alert('Помилка копіювання до буфера обміну:', error);
  }
};

У модифікованій функції запис в буфер обміну відбувається лише за наявності дозволу на це від користувача. В іншому випадку виникає помилка.

Використання NPM пакета для копіювання

Якщо ви не бажаєте використовувати API буфера обміну безпосередньо, можна скористатися одним із доступних NPM-пакетів. Для React-проєктів можна застосувати react-copy-to-clipboard. Цей пакет є популярним та легким у використанні.

Встановіть пакет у свій 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>Копіювати</button>
</CopyToClipboard>

Зверніть увагу на функцію обробника onCopy. Вона приймає два аргументи: text – скопійований текст та result – булеве значення, що вказує на успішність копіювання.

Для чого потрібна функція “Копіювати до буфера обміну”?

Ви розглянули способи застосування API буфера обміну та пакету react-copy-to-clipboard для реалізації копіювання тексту в React-застосунках. Хоча користувачі можуть виділяти текст і використовувати стандартні функції копіювання, наявність спеціальної кнопки для копіювання спрощує процес та покращує загальний досвід взаємодії з користувацьким інтерфейсом.