СОЗДАНИЕ QR-КОДА С ИСПОЛЬЗОВАНИЕМ БИБЛИОТЕКИ REACT.JS

CREATING A QR-CODE USING REACT.JS LIBRARY

Maxim Beryanov

Student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

В настоящее время QR-коды широко распространены во многих областях – на упаковках продуктов, в листовках и приложениях. В данной статье предлагается создать веб-сайт, который будет генерировать QR-код из передаваемого ему текста, и позволять загружать его в виде изображения.

ABSTRACT

Currently, QR codes are widely used in many areas - on product packaging, leaflets and applications. This article proposes to create a website that will generate a QR code from text passed to it, and allow it to be downloaded as an image.

Ключевые слова: веб, QR-код, React.JS, JavaScript, Vite.

Keywords: web, QR-code, React.JS, JavaScript, Vite.

Первым делом, необходимо с помощью менеджера пакетов npm и технологии Vite [1] инициализировать проект через следующую команду в терминале: npm create vite qr-code [2]. В интерактивном режиме, далее, нужно выбрать шаблон для работы с библиотекой React.JS на языке TypeScript. После этого, можно перейти непосредственно внутрь созданной директории под названием qr-code и установить дополнительные, нужные нам для работы, зависимости через команду: npm install qrcode @types/qrcode shortid @nextui-org/react. В качестве UI-библиотеки будет использован NextUI [3]. Это быстрая и современная технология, которая использует в себе React.JS [4] – для того, чтобы начать работу с данной библиотекой необходимо обернуть главный компонент нашего веб-приложения в библиотечный компонент <NextUIProvider />.

Затем мы создадим служебную функцию, отвечающую за генерацию QR-кода, имеющую некоторое строковое значение в качестве единственного аргумента и возвращающую QR-код в виде кодированной в формате Base64 картинки, если при обработке не возникло ошибок (иначе возвращается undefined). Теперь, когда у нас есть ключевая функциональность разрабатываемой системы, мы можем приступить к работе над основным компонентом данной статьи – предлагается создать два состояния (одно для хранения значения из поля ввода – например, соответствующего URL-адресу, который мы хотим преобразовать в QR-код, а другое – для самого QR-кода). Также, предлагается создать функцию, которая будет принимать кодированный в Base64 QR-код и загружать его (рисунок 1). Чтобы не было конфликтов между названиями файлов, мы используем библиотеку shortid для генерации уникального имени для каждого файла.

Рисунок 1. Функции генерирования и скачивания QR-кода

Использование библиотеки NextUI позволяет удобным образом генерировать div-контейнеры с нужными свойствами. Как мы видим, при нажатии на кнопки генерации и скачивания QR-кода, вызываются соответствующие функции, описанные выше (рисунок 2).

Рисунок 2. Реализация интерфейса системы создания QR-кода

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

Список литературы:

1. Vite [Электронный ресурс] URL: https://vitejs.dev (дата обращения: 09.01.2023).
2. QR-code | npm package [Электронный ресурс] URL: https://www.npmjs.com/package/qrcode (дата обращения: 09.01.2023).
3. NextUI [Электронный ресурс] URL: https://nextui.org (дата обращения: 09.01.2023).
4. React.JS [Электронный ресурс] URL: https://reactjs.org (дата обращения: 09.01.2023).