{"draftJsState":{"blocks":[{"data":{"image":{"id":"6377a533ffba9c2b8e9d39eb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1bjn8"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"8nlef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зависимости","type":"header-three","key":"f7lgt"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":6,"offset":79}],"inlineStyleRanges":[],"text":"Есть множество библиотек для генерации QR-кодов. В данном случае воспользуемся qrcode.","type":"unstyled","key":"5104p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установим пакет с помощью следующей команды:","type":"unstyled","key":"15tnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm i qrcode","type":"blockquote","key":"8emon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка компонента","type":"header-three","key":"a5qeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":31,"style":"BOLD"}],"text":"Начнем с базового компонента с полем для ввода текста, поскольку нам нужны входные данные для генерации QR-кода.","type":"unstyled","key":"8vk89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useState } from \"react\";export default function App() {\n const [text, setText] = useState(\"\"); return (\n

\n setText(e.target.value)}\n />\n
\n

\n );\n}","type":"blockquote","key":"479ba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Генерация QR-кода","type":"header-three","key":"5skjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы сгенерировать QR-код, понадобится элемент canvas для его рендеринга.","type":"unstyled","key":"4eru4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":256,"style":"ITALIC"},{"length":10,"offset":295,"style":"ITALIC"}],"text":"import QRCode from \"qrcode\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport default function App() {\n const [text, setText] = useState(\"\");\n const canvasRef = useRef();\n\nuseEffect(() => {\n QRCode.toCanvas(\n canvasRef.current,\n // QR-код не работает с пустой строкой,\n // поэтому мы используем пробел в качестве запасного варианта\n text || \" \",\n (error) => error && console.error(error)\n );\n }, [text]);\n\n return (\n

\n setText(e.target.value)}\n />\n
\n\n

\n );\n}","type":"blockquote","key":"8257b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже представлен конечный результат.","type":"unstyled","key":"es21k"},{"data":{"image":{"id":"6377a54ccf8bb6240044c001"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9nknp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование QR-кода в ванильном JS","type":"header-three","key":"fdnot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":83,"style":"BOLD"}],"text":"Пакет можно использовать не только с React, но и с любым другим фреймворком и даже с ванильным JS.","type":"unstyled","key":"akekv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"},{"length":12,"offset":111,"style":"ITALIC"}],"text":"

\n \n
\n

\n\n// script.js const QRCode = require(\"qrcode\");\n\nconst input = document.getElementById(\"text-input\");\nconst canvas = document.getElementById(\"qr-code-canvas\");\n\ninput.addEventListener(\"change\", (event) => {\n QRCode.toCanvas(\n canvas,\n event.target.value || \" \",\n (error) => error && console.error(error)\n );\n});","type":"blockquote","key":"1p0bc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Варианты использования","type":"header-three","key":"1nmgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"QR-коды можно использовать для хранения любых данных. Рассмотрим наиболее частые случаи их применения.","type":"unstyled","key":"6rjao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"1. Обмен ссылками и контактными данными","type":"header-three","key":"8bj3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"QR-код обеспечивает крайне простой процесс обмена ссылками и контактными данными. Достаточно лишь отсканировать код с помощью любого приложения!","type":"unstyled","key":"3h77h"},{"data":{"image":{"id":"6377a54c8fd63c500ec3278c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2md27"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"2. Виртуальные карты и билеты","type":"header-three","key":"1ntim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"QR-коды можно использовать и для верификации. Просто нанесите их на виртуальные карты или билеты, а потом отсканируйте, чтобы подтвердить разрешение или подлинность.","type":"unstyled","key":"ckn5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"3. Добавление цифрового контакта","type":"header-three","key":"77pg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотите рассказать пользователям обо всех особенностях своего продукта, но не можете вместить это в одном рекламном объявлении? Добавьте QR-код со ссылкой на страницу с подробной информацией о продукте и позвольте пользователям изучить ее самостоятельно.","type":"unstyled","key":"6984f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"111h0"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":83,"offset":0}],"inlineStyleRanges":[],"text":"Как оптимизация изображений снизила “вес” главной страницы на моем веб-сайте на 62%","type":"unordered-list-item","key":"bthvn"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":37,"offset":0}],"inlineStyleRanges":[],"text":"7 полезных советов для веб-дизайнеров","type":"unordered-list-item","key":"8brkk"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":43,"offset":0}],"inlineStyleRanges":[],"text":"4 главных тренда в веб-хостинге в этом году","type":"unordered-list-item","key":"d8hm7"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":8,"offset":14},{"key":6,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"3gjak"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":14,"offset":15},{"key":8,"length":38,"offset":31}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Tapajyoti Bose: How Pros add QR code to their sites \uD83D\uDE0E✨","type":"unstyled","key":"fb8io"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"31cs7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"NfPNCF9eaJtNywHJwa5a"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/16461/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://www.npmjs.com/package/qrcode","url":"https://www.npmjs.com/package/qrcode"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/1775/","url":"https://nuancesprog.ru/p/1775/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/2634/","url":"https://nuancesprog.ru/p/2634/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuancesprog.ru/p/876/","url":"https://nuancesprog.ru/p/876/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://tapajyoti-bose.medium.com/","url":"https://tapajyoti-bose.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://tapajyoti-bose.medium.com/how-pros-add-qr-code-to-their-sites-a103215d4cc","url":"https://tapajyoti-bose.medium.com/how-pros-add-qr-code-to-their-sites-a103215d4cc"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}