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



Книга Как создать 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-код со ссылкой на страницу с подробной информацией о продукте и позвольте пользователям изучить ее самостоятельно.



76   0  
    Ничего не найдено.

Добавить ответ:
Отменить.