Как создать QR-код для сайта

Зависимости

Есть множество библиотек для генерации QR-кодов. В данном случае воспользуемся qrcode.

Установим пакет с помощью следующей команды:

npm i qrcode

Настройка компонента

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

import { useState } from "react";export default function App() {
  const [text, setText] = useState("");  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />
    </div>
  );
}

Генерация QR-кода

Чтобы сгенерировать QR-код, понадобится элемент canvas для его рендеринга.

import QRCode from "qrcode";
import { useEffect, useRef, useState } from "react";

export default function App() {
  const [text, setText] = useState("");
  const canvasRef = useRef();

useEffect(() => {
    QRCode.toCanvas(
      canvasRef.current,
      // QR-код не работает с пустой строкой,
      // поэтому мы используем пробел в качестве запасного варианта
      text || " ",
      (error) => error && console.error(error)
    );
  }, [text]);

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />

      <canvas ref={canvasRef} />
    </div>
  );
}

Ниже представлен конечный результат.

Использование QR-кода в ванильном JS

Пакет можно использовать не только с React, но и с любым другим фреймворком и даже с ванильным JS.

<!-- index.html -->
<div>
  <input id="text-input" />
  <br />
  <canvas id="qr-code-canvas"></canvas>
</div>

// script.js
const QRCode = require("qrcode");

const input = document.getElementById("text-input");
const canvas = document.getElementById("qr-code-canvas");

input.addEventListener("change", (event) => {
  QRCode.toCanvas(
    canvas,
    event.target.value || " ",
    (error) => error && console.error(error)
  );
});

Варианты использования

QR-коды можно использовать для хранения любых данных. Рассмотрим наиболее частые случаи их применения.

1. Обмен ссылками и контактными данными

QR-код обеспечивает крайне простой процесс обмена ссылками и контактными данными. Достаточно лишь отсканировать код с помощью любого приложения!

2. Виртуальные карты и билеты

QR-коды можно использовать и для верификации. Просто нанесите их на виртуальные карты или билеты, а потом отсканируйте, чтобы подтвердить разрешение или подлинность.

3. Добавление цифрового контакта

Хотите рассказать пользователям обо всех особенностях своего продукта, но не можете вместить это в одном рекламном объявлении? Добавьте QR-код со ссылкой на страницу с подробной информацией о продукте и позвольте пользователям изучить ее самостоятельно.

Читайте также:

• Как оптимизация изображений снизила “вес” главной страницы на моем веб-сайте на 62%
• 7 полезных советов для веб-дизайнеров
• 4 главных тренда в веб-хостинге в этом году

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Tapajyoti Bose: How Pros add QR code to their sites 😎✨