13,8 тыс подписчиков

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

19 ноября 202219 ноя 2022

2 мин

Источник: Nuances of Programming Зависимости Есть множество библиотек для генерации 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-код не работает с пустой строкой,

// поэтому мы используем пробел

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-код не работает с пустой строкой,

// поэтому мы используем пробел

Оглавление

Зависимости
Настройка компонента
Генерация QR-кода

Источник: Nuances of Programming

Зависимости

Есть множество библиотек для генерации 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.

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