Как создать QR-код для веб-страницы с помощью ReactJS
Как это началось?
===================
Этот пост был впервые опубликован в статье Как создать QRCode для веб-страницы с помощью ReactJS.
===================
Это забавная часть, я использовал панель поиска Google Chrome, когда заметил значок, который запускал опцию «Создать QRCode для этого веб-сайта», когда я наводил на него курсор.
Мне потребовалось всего около 3 секунд, чтобы сказать, что я хочу это сделать! Затем я провел свое исследование и нашел хорошую библиотеку, которая могла бы помочь мне сделать именно это, и самое лучшее в ней то, что в настоящее время она поддерживается командой Facebook!. Решение здесь:
Давай начнем
Загрузите модуль NPM qrcode.react, выполнив следующую команду:
npm я qrcode.react
После установки создайте файл React и импортируйте библиотеку в верхнюю часть файла.
импортировать QRCode из qrcode.react;
Теперь последний шаг — вызвать его в нашем компоненте.
‹QRCode
value={`A STRING`}
includeMargin={true}
size={200}
level={`L`}
imageSettings={ {
src: `A STRING`,
высота: 30,
ширина: 30,
раскопки: true
}}
/›
Как видите, есть несколько параметров, которые могут помочь вам изменить свой собственный QRCode, но два самых важных — это значение и src; эти два будут обрабатывать изображение, которое будет отображаться в середине QRCode, а значение будет содержать веб-сайт, на который вы хотите перенаправить пользователя.
Этот код может помочь вам создать такие функции, как упомянутые в самом первом абзаце, или, возможно, создать что-то вроде того, что делают Snapchat, CashApp и другие; создайте QRCode, который приведет вас прямо к профилю пользователя X!.
До свидания 👋👋👋
