Копировать в буфер в React

Крупный план кнопок «копировать» на интерфейсе

Простой компонент «Копировать» в React экономит время пользователей и снижает количество опечаток. В статье показаны два подхода: нативный Clipboard API и пакет react-copy-to-clipboard, а также практические советы, fallback и критерии приёмки.

Почему это полезно

Ручное выделение и копирование фрагментов — особенно на мобильных устройствах — медленное и склонно к ошибкам. Кнопка “Копировать” повышает удобство, уменьшает число опечаток и ускоряет рабочие сценарии (копирование токенов, команд, URL, сниппетов).

Важно: «копировать в буфер» затрагивает привилегии браузера и поведение разных платформ — учитывайте fallback для старых браузеров и ограничений приватного режима.

Установка и базовый компонент

Создайте компонент с именем CopyButton. Он принимает проп text — то, что нужно скопировать.

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

function CopyButton({text}) {  
    const copyToClipboard = () => {  
        // copy to clipboard  
    }  
  return (  
      
  )  
}  
  
export default CopyButton

Когда пользователь кликает по кнопке, должен вызываться copyToClipboard и копировать text в системный буфер обмена.

Использование Clipboard API в React

Clipboard API предоставляет методы для взаимодействия с буфером: copy, cut, paste. В современных браузерах доступен объект navigator.clipboard и его метод writeText.

Вот реализация в исходном руководстве:

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 и обработку ошибок. В реальном приложении вместо alert лучше показывать ненавязчивое уведомление (toast) или визуальную индикацию.

Проверка разрешений

Рекомендуется перед записью проверить разрешение clipboard-write через 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);  
    }  
};

Важно: в некоторых браузерах (или режимах приватности) доступ к clipboard может быть ограничен. Всегда делайте graceful fallback.

Использование NPM-пакета в React

Если вы не хотите напрямую работать с API, можно использовать готовые пакеты. Для React популярным вариантом является react-copy-to-clipboard — он прост в использовании и скрывает нюансы разных браузеров.

Установите пакет:

npm install react-copy-to-clipboard

Импорт и пример использования из исходного текста:

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

 console.log(result)}>

onCopy получает (text, result), где result — boolean успеха операции.

Примечание: пакет упрощает реализацию, но зависимость добавляет поддержку и возможные несовместимости. Оцените trade-off для вашего проекта.

Практические советы по UX

Локализуйте метки кнопок: вместо “Copy” используйте “Копировать”.
Показывайте короткое подтверждение (например, tooltip или toast) и меняйте иконку на чек при успешном копировании.
Откладывайте состояние успеха на 1,5–2 с, затем возвращайте исходный вид.
Для скрытого контента (пароли, токены) предупреждайте пользователя, что данные попадут в системный буфер обмена.

Важно: не сохраняйте секреты в локальное хранилище, если они попадают в буфер обмена — пользователи и другие приложения могут получить к ним доступ.

Когда «копировать» не сработает или будет нерелевантно

В старых браузерах отсутствует navigator.clipboard (например, старые версии Internet Explorer).
В приватном/инкогнито режиме доступ к буферу может быть ограничен.
На некоторых мобильных браузерах поведение может отличаться по UX.

Всегда реализуйте fallback: временно создавайте элемент textarea, выделяйте текст и вызывайте document.execCommand(‘copy’) для совместимости.

Шпаргалка: надёжный fallback-алгоритм

Ниже — практический сниппет с fallback-логикой (совет):

async function copyWithFallback(text) {
  try {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(text);
      return true;
    }
  } catch (e) {
    // продолжим к fallback
  }

  // fallback: временный textarea
  try {
    const el = document.createElement('textarea');
    el.value = text;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    const successful = document.execCommand('copy');
    document.body.removeChild(el);
    return successful;
  } catch (err) {
    return false;
  }
}

Матрица совместимости (кратко)

Современные десктоп-браузеры: navigator.clipboard доступен при HTTPS и интерактивном событии.
Мобильные браузеры: поддержка есть, но поведение и запросы разрешений различаются.
Старые браузеры: используйте document.execCommand как fallback.

Критерии приёмки

Кнопка отображается и доступна для клавиатуры.
При клике текст копируется в буфер в 95% тестируемых браузеров (или возвращается понятное сообщение об ошибке).
Пользователь видит ненавязчивое подтверждение об успехе/ошибке.
Компонент локализован: метки и подсказки переведены.

Тестовые сценарии (QA)

Клик по кнопке копирует короткую строку (латиница).
Копирование длинного текста (>1000 символов).
Копирование с Unicode / эмодзи.
Поведение в приватном окне.
Симуляция отказа доступа к clipboard (эмуляция throw).

Чек‑лист по ролям

Разработчик: добавить fallback, обработать ошибки, локализовать метки.
QA: покрыть сценарии с разными браузерами и длинами текста.
PM/Дизайнер: утвердить UX-подтверждение успеха и текст предупреждений о секретах.

Альтернативы и архитектурные решения

Полностью клиентский подход (Clipboard API + fallback) — минимальная зависимость.
Пакет вроде react-copy-to-clipboard — быстрее внедряется, скрывает детали.
Для серверных сценариев (через API) — неактуально: доступ к буферу — только у клиента.

Безопасность и конфиденциальность

Не копируйте секреты автоматически без явного действия пользователя.
Уведомляйте пользователя, если копирование отправляет в общий системный буфер.
Не храните чувствительные данные в локальном хранилище после копирования.

Decision flowchart

flowchart TD
  A[Пользователь нажал кнопку] --> B{Есть navigator.clipboard?}
  B -- Да --> C{Нужны разрешения?}
  C -- Да --> D[Проверить navigator.permissions]
  D -- granted/prompt --> E[navigator.clipboard.writeText]
  D -- denied --> F[Показать ошибку и fallback]
  C -- Нет --> E
  B -- Нет --> G[Использовать fallback: textarea + execCommand''copy'']
  E --> H[Показать успех]
  F --> H
  G --> H

Короткое резюме

Добавление кнопки «Копировать» в React-приложение улучшает UX и снижает ошибки пользователя. Используйте нативный Clipboard API с обработкой разрешений и реализуйте fallback для совместимости. Для быстрой интеграции подойдёт react-copy-to-clipboard, но помните о компромиссе зависимости.

Ключевые действия: локализация меток, грамотно показанные уведомления об успехе/ошибке, тесты на разных браузерах и безопасная обработка секретов.