QR (Quick Response) — двухмерный штрих‑код, который хранит данные в машинно‑читаемом виде. В QR‑код можно закодировать ссылку на сайт, меню ресторана, спецификацию продукта или страницу с инструкцией. QR‑коды дают пользователям быстрый доступ к информации и могут стать конкурентным преимуществом.

Ниже вы найдёте практическое руководство по созданию генератора QR‑кодов на React с реальными примерами кода, проверенными приёмами и рекомендациями по безопасности.

Перед началом

Чтобы собрать этот проект, понадобится:

• Базовые знания HTML‑форм и input‑элементов, JavaScript и хука useState в React.
• Понимание условного рендеринга в React (rendering на основе состояний).
• Node.js установлен на локальной машине и умение работать с менеджерами пакетов (npm или yarn).

Репозиторий с примером содержит две ветки: starter и final. Ветка starter даёт готовую UI‑структуру, чтобы вы могли сосредоточиться на логике; final показывает рабочую демо‑версию.

Как устроены QR‑коды

QR‑коды выглядят просто или случайно, но внутри скрыты полезные элементы, обеспечивающие устойчивое декодирование.

Структура

• Data modules — чёрные и белые квадраты, которые кодируют данные.
• Finder patterns — большие квадраты («глаза») в углах, помогающие сканеру найти код.
• Separators — разделители вокруг finder patterns, отделяющие их от данных.
• Quiet zone — поле вокруг кода (белая граница), необходимое для корректного распознавания.
• Alignment markers — маленькие маркеры выравнивания, улучшающие чтение под разными углами.

Кодирование и декодирование

Кодирование — превращение входной строки (например, URL) в матрицу QR. Декодирование — извлечение данных с помощью камеры телефона или специального сканера.

Библиотека QRCode

Для генерации QR‑кодом мы используем пакет qrcode (npm). Он поддерживает генерацию в браузере и на сервере.

Установка:

yarn add qrcode

Или с npm:

npm i qrcode

Подготовка проекта

Клонирование стартовой ветки:

git clone -b starter https://github.com/makeuseofcode/qr-code-generator.git

Установка зависимостей в каталоге проекта:

yarn

Или:

npm install

Запуск в режиме разработки:

yarn start

Или:

npm start

После старта вы увидите простую форму в браузере:

Реализация логики — пошагово

Откройте файл src/App.jsx и замените содержимое следующим кодом. Компонент реализует ввод URL, генерацию DataURL, предварительный просмотр, скачивание PNG и копирование ссылки в буфер обмена.

import React, { useState } from "react";
import "./styles.scss";
import QRCode from "qrcode";

const App = () => {
  const [url, setUrl] = useState("");
  const [dataUrl, setDataUrl] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleQRCodeGeneration = async (e) => {
    e && e.preventDefault();
    setError("");

    if (!url) {
      setError("Введите корректный URL");
      return;
    }

    try {
      setLoading(true);
      // toDataURL поддерживает промисы, если не передавать callback
      const dq = await QRCode.toDataURL(url, { width: 300 });
      setDataUrl(dq);
    } catch (err) {
      console.error(err);
      setError("Ошибка при генерации QR‑кода");
    } finally {
      setLoading(false);
    }
  };

  const handleDownload = () => {
    // Ссылка с атрибутом download автоматически скачивает изображение
    // Если нужен более гибкий подход — создать Blob и использовать URL.createObjectURL
    return;
  };

  const handleClear = () => {
    setUrl("");
    setDataUrl("");
    setError("");
  };

  return (
    

      
Генератор QR‑кода на React

      

         setUrl(e.target.value)}
        />

        
        Очистить
      

      {error && 
{error}
}

      {dataUrl && (
        

          

          

            Скачать PNG
             {
                try {
                  await navigator.clipboard.writeText(dataUrl);
                  alert("DataURL скопирован в буфер обмена");
                } catch (err) {
                  alert("Не удалось скопировать");
                }
              }}
            >Копировать DataURL
          
        
      )}
    
  );
};

export default App;

Ключевые моменты кода:

• Используем async/await с QRCode.toDataURL, чтобы упростить обработку ошибок.
• Проверяем ввод URL (атрибут type=”url” и локальная валидация).
• Визуальное состояние загрузки через loading и ошибки через error.
• Скачивание реализовано как ссылка с атрибутом download.

Вариант: генерация через callback

Если предпочтительнее callback‑стиль, библиотека поддерживает его:

QRCode.toDataURL(url, { width: 300 }, (err, dataUrl) => {
  if (err) return console.error(err);
  setDataUrl(dataUrl);
});

Как добавить лого в центр QR‑кода

Добавление логотипа обычно выполняется через наложение изображения поверх сгенерированного PNG на canvas. Проще: генерируем DataURL, создаём canvas, рисуем QR, затем рисуем логотип поверх и получаем итоговый DataURL.

Короткая методология:

1. Сгенерировать DataURL QR.
2. Создать , загрузить QR в Image и отрисовать.
3. Загрузить логотип и отрисовать по центру с альфа‑каналом.
4. Экспортировать canvas.toDataURL(“image/png”).

Этот подход даёт контроль над размерами логотипа и прозрачностью.

Альтернативные подходы

• Библиотека react‑qr‑code — компонент для рендеринга QR прямо в SVG (удобно для встраивания в UI).
• Серверная генерация (Node.js + qrcode.toFile или библиотека Sharp) — полезно, если нужно выдавать QR по API или защищать секреты.
• Canvas‑решение для добавления кастомных эффектов и логотипов.

Пример серверной генерации файла на Node.js:

const QRCode = require('qrcode');
QRCode.toFile('qrcode.png', 'https://example.com', { width: 400 }, function (err) {
  if (err) throw err;
  console.log('Файл создан');
});

Тесты и критерии приёмки

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

• При вводе валидного URL и нажатии «Сгенерировать» появляется изображение QR‑кода.
• Ссылка «Скачать PNG» загружает файл формата PNG с валидным QR.
• Генерация при некорректном URL не запускается, показывается сообщение об ошибке.
• При возможных ошибках (сеть, ошибки библиотеки) приложение не падает и показывает понятное сообщение.

Тест‑кейсы:

• Ввести корректный https URL -> сгенерирован QR, сканируется телефоном.
• Ввести строку без схемы (example.com) -> валидация блокирует отправку.
• Считать сгенерированный QR код через телефон -> URL совпадает с введённым.
• Попытка генерации при отсутствии интернета -> приложение должно показать ошибку (если библиотека запрашивает ресурсы).

Безопасность и рекомендации при сканировании

Важно помнить, что QR‑коды могут указывать на вредоносные ресурсы. Рекомендации:

• При сканировании показывайте пользователю превью URL перед переходом.
• Валидируйте и нормализуйте URL перед генерацией (например, явно требуйте https в проде).
• На стороне сервера проверяйте и фильтруйте содержимое, если QR ведёт к ресурсам, обрабатываемым вашим приложением.
• Учите пользователей проверять домен и подписи при работе с критичными операциями.

Важно: QR‑код — просто удобный контейнер. Без контекста и проверки он может перенаправить на фишинговую страницу.

Чеклист для продакшена

Для релиза генератора QR‑кодов выполните:

• Тесты для критических сценариев (валидация, загрузка, декодирование).
• Обработку ошибок и дружественные сообщения пользователю.
• Логи и мониторинг ошибок (Sentry/LogRocket и т. п.).
• Ограничение по длине и типу входных данных.
• Политику Content Security Policy (CSP) для защиты от XSS.
• Тестирование на мобильных устройствах и реальных сканерах.

Ментальные модели и эвристики

• «Fail fast» — валидируйте вход сразу на клиенте, чтобы не запускать лишнюю генерацию.
• «Preview before follow» — показывайте пользователю URL перед переходом по ссылке из QR.
• «Server for heavy lifting» — если нужно генерировать тысячи QR в минуту или добавлять персонализованные данные, выполняйте генерацию на сервере.

Мини‑справка (глоссарий)

• DataURL — строка, представляющая изображение в формате base64 (data:image/png;base64,…).
• Finder patterns — большие квадраты в углах QR, используемые для обнаружения кода.
• Quiet zone — минимальная белая граница вокруг QR.

Часто задаваемые вопросы

Можно ли генерировать QR с логотипом прямо в браузере?

Да — генерируете DataURL, отрисовываете его на canvas и накладываете логотип перед экспортом.

Как убедиться, что QR безопасен для пользователей?

Показывайте предварительный просмотр и домен перед переходом; требуйте https в продакшн‑сборках.

Можно ли генерировать QR на сервере?

Да. Библиотека qrcode поддерживает toFile и работу в Node.js, что удобно для API и массовой генерации.

Резюме

• С помощью qrcode легко создать генератор QR на React и получить DataURL для предпросмотра и скачивания.
• Для продакшена обязательно добавьте валидацию, обработку ошибок и меры безопасности при сканировании.
• Рассмотрите серверную генерацию для массовых сценариев и добавления бизнес‑логики.

Примечание: перед развёртыванием протестируйте с разными фактическими сканерами (мобильные приложения, встроенные камеры, десктопные решения).

Краткие выводы:

• Генерация: QRCode.toDataURL(url, { width: 300 }) — простой путь в браузере.
• Скачивание: ссылка с download или экспорт canvas в Blob.
• Безопасность: показывайте превью и валидируйте URL.