QR-коды очень полезны для хранения информации, которой можно очень легко поделиться. QR-код позволяет пользователю хранить информацию в виде изображения, которым можно поделиться на любом носителе. Думайте о ссылке на ваш веб-сайт как об изображении, которое в конечном итоге при сканировании приведет к вашей веб-странице. В этом уроке я покажу вам, как вы можете легко реализовать QR-код, внутри которого будет встроена текстовая информация, которой вы можете поделиться.
Для целей этого руководства вам потребуется установить следующий пакет NPM:
QRcode.react (https://www.npmjs.com/package/qrcode.react)
Во-первых, нам нужно запустить реагирующее приложение. Самый быстрый способ сделать это — создать реагирующее приложение с помощью npx create-react-app. Как только вы запустите эту команду, она сгенерирует шаблонное приложение для реагирования.
Далее мы импортируем пакет, необходимый для реализации QRcode.
Как только это будет сделано, мы, наконец, поместим наш пакет QRcode в нашу логику рендеринга. Пакет QRCode ожидает много реквизитов, но наиболее важным реквизитом для его работы является valueprop. Значение будет значением, которое вы хотите, чтобы ваши пользователи получили после сканирования вашего QR-кода. Это значение может быть только строкой.
Вы можете отображать QR-код как SVG или как холст. Вы также можете указать его размер. Для получения дополнительных реквизитов, пожалуйста, прочитайте его документацию. Этот код будет генерировать следующий вывод.
И вот как вы можете реализовать QRcode в своих приложениях react.js. Для получения кода следующего проекта посетите мой репозиторий GitHub.
