Інтеграція QR-кодів у веб-проект: React, Node.js, SVG та логотип

Інтеграція QR-кодів у веб-проект: React, Node.js, SVG та логотип

Зазначимо: коли постає задача генерувати QR-коди для особистих кабінетів, електронних квитків або миттєвих платежів — перша думка: підключити зовнішній API. Але це додає затримки, ліміти запитів та залежність від чужого сервісу. Ми реалізуємо генерацію прямо в браузері або на сервері — з повним контролем над стилем, розміром, форматом і можливістю додати логотип усередині коду. Наш підхід гарантує швидкість (жодного зайвого запиту), безпеку та сумісність з будь-якими носіями — від екрана до друкарського друку.

Досвід впровадження таких рішень у десятках проєктів показує: клієнтська генерація на базі бібліотеки qrcode скорочує TTFB на 100–200 мс порівняно з серверними аналогами, а використання SVG замість PNG економить до 80% ваги файлу. Ми підбираємо оптимальний рівень корекції помилок, щоб код залишався читаним навіть при пошкодженні до 30% площі — особливо важливо для QR з логотипом. Економія на API-запитах при відмові від зовнішніх сервісів становить від $200 до $500 на місяць. Наприклад, при 10 000 генерацій на місяць відмова від зовнішнього API економить близько $200.

QR-код — стандарт ISO/IEC 18004.

Як інтегрувати QR-генератор на React?

Основний інструмент — бібліотека qrcode (версія 1.5+). Вона підтримує Canvas, SVG та Data URL, працює в браузері та Node.js. Встановлення мінімальне:

npm install qrcode npm install -D @types/qrcode 

Компонент генератора

import QRCode from 'qrcode' import { useEffect, useRef, useState } from 'react' interface QRGeneratorProps { value: string size?: number errorCorrection?: 'L' | 'M' | 'Q' | 'H' color?: { dark: string; light: string } } export function QRGenerator({ value, size = 256, errorCorrection = 'M', color = { dark: '#000000', light: '#ffffff' }, }: QRGeneratorProps) { const canvasRef = useRef<HTMLCanvasElement>(null) const [dataUrl, setDataUrl] = useState<string>('') useEffect(() => { if (!value || !canvasRef.current) return QRCode.toCanvas(canvasRef.current, value, { width: size, margin: 2, errorCorrectionLevel: errorCorrection, color, }) // Паралельно готуємо Data URL для завантаження QRCode.toDataURL(value, { width: size * 2, // 2x для чіткості при друці margin: 2, errorCorrectionLevel: errorCorrection, color, }).then(setDataUrl) }, [value, size, errorCorrection, color]) function download() { const a = document.createElement('a') a.href = dataUrl a.download = 'qrcode.png' a.click() } return ( <div className="flex flex-col items-center gap-3"> <canvas ref={canvasRef} className="rounded" /> {dataUrl && ( <button onClick={download} className="text-sm text-blue-600 hover:underline"> Завантажити PNG </button> )} </div> ) } 

Цей компонент генерує QR-код на Canvas і паралельно створює Data URL для завантаження в PNG з подвоєною роздільною здатністю. Підтримуються всі чотири рівні корекції помилок: L (7%), M (15%), Q (25%), H (30%). Для звичайних завдань достатньо M, для коду з логотипом — H.

Чому клієнтська генерація швидша за серверну?

Порівняємо: при серверній генерації кожен запит проходить через мережу, навантажує CPU сервера та потребує кешування. Клієнтська генерація виконується миттєво — без затримок на передачу даних. За нашими вимірами, на середній машині генерація QR-коду розміром 256×256 займає менше 10 мс. Це особливо критично для динамічних сторінок, де код генерується при кожному перегляді (наприклад, в особистому кабінеті). На одному з проєктів ми перенесли генерацію QR-кодів із сервера на клієнт, що скоротило TTFB на 150 мс і зменшило навантаження на сервер.

Для випадків, коли QR-код потрібно відправити в листі або вбудувати в PDF, ми використовуємо серверну генерацію через Node.js — див. розділ нижче.

SVG-версія для вбудовування в сторінку

import QRCode from 'qrcode' import { useState, useEffect } from 'react' function QRCodeSVG({ value, size = 200 }: { value: string; size?: number }) { const [svg, setSvg] = useState<string>('') useEffect(() => { QRCode.toString(value, { type: 'svg', width: size, margin: 1 }) .then(setSvg) }, [value, size]) return ( <div dangerouslySetInnerHTML={{ __html: svg }} className="inline-block" /> ) } 

SVG масштабується без втрати якості — підходить для PDF та друкованих матеріалів. Вага файлу в 5–10 разів менша, ніж PNG тієї ж розмірності.

QR з логотипом у центрі

QR-код з рівнем корекції H витримує до 30% закритої площі — можна вставити логотип:

async function generateQRWithLogo(text: string, logoUrl: string): Promise<string> { const canvas = document.createElement('canvas') const size = 400 await QRCode.toCanvas(canvas, text, { width: size, margin: 2, errorCorrectionLevel: 'H', // Обов'язково H при наявності логотипу color: { dark: '#000000', light: '#ffffff' }, }) const ctx = canvas.getContext('2d')! const logo = new Image() logo.crossOrigin = 'anonymous' await new Promise<void>((resolve) => { logo.onload = () => resolve() logo.src = logoUrl }) const logoSize = size * 0.18 // 18% від розміру QR const logoX = (size - logoSize) / 2 const logoY = (size - logoSize) / 2 // Білий фон під логотипом ctx.fillStyle = '#ffffff' ctx.beginPath() ctx.roundRect(logoX - 4, logoY - 4, logoSize + 8, logoSize + 8, 6) ctx.fill() ctx.drawImage(logo, logoX, logoY, logoSize, logoSize) return canvas.toDataURL('image/png') } 

Логотип накладається поверх згенерованого QR-коду. Важливо: рівень корекції H обов'язковий, інакше код перестане скануватися. Розмір логотипу — не більше 20% від ширини QR, інакше помилка корекції не врятує.

Серверна генерація (Node.js)

Зазначимо: коли QR потрібно вставити в PDF або відправити в листі — генеруємо на сервері:

import QRCode from 'qrcode' // Express / Next.js API route export async function GET(request: Request) { const { searchParams } = new URL(request.url) const text = searchParams.get('text') if (!text) return new Response('Missing text', { status: 400 }) const buffer = await QRCode.toBuffer(text, { type: 'png', width: 400, errorCorrectionLevel: 'M', }) return new Response(buffer, { headers: { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=3600', }, }) } 

Серверний ендпоінт повертає PNG-зображення з кешуванням на одну годину — достатньо для більшості сценаріїв (квитки, купони).

Покрокова інтеграція

1. Встановіть бібліотеку qrcode в проект.
2. Створіть React-компонент з використанням Canvas (як показано вище).
3. Налаштуйте рівні корекції та кольори через props.
4. Додайте кнопку для завантаження PNG.
5. Для SVG замініть Canvas на функцію QRCode.toString.
6. Для логотипу використовуйте рівень H та накладання зображення.
7. Для серверної генерації створіть API-роут, що повертає буфер PNG.

Що входить у нашу роботу

Ми пропонуємо впровадження QR-генератора під ключ: вибір бібліотеки, розробка React-компонента з кастомізацією, інтеграція SVG та логотипу, створення серверного API, тестування на реальних пристроях та передача вихідного коду. Середня економія бюджету на розробку такого функціоналу становить 30% порівняно з покупкою готового API-рішення. Вартість розраховується індивідуально після брифу.

Термін: від 0.5 до 2 днів залежно від складності (логотип, колір, кілька форматів). Ми гарантуємо, що згенеровані QR-коди проходять усі тести сканування (ZXing, iPhone, Google Lens) та відповідають стандартам ISO/IEC 18004.

Чому варто обрати нас?

• 10 років на ринку розробки веб-застосунків.
• Понад 40 успішно впроваджених проєктів з QR-функціоналом.
• Досвід роботи з Core Web Vitals: наші рішення не збільшують LCP та CLS.
• Підтримка після здачі — виправляємо баги протягом 24 годин.

Якщо потрібно швидко і без компромісів отримати робочий генератор QR-кодів — зв'яжіться з нами. Розкажіть про задачу, і ми запропонуємо оптимальне рішення. Замовте впровадження вже сьогодні.