Como construir um gerador de código QR em React

A ideia por trás da criação de um gerador de código de resposta rápida (QR) é converter dados de imagens em texto. Um código QR é simplesmente a representação de dados de imagem como texto e possui muitos aplicativos úteis, desde menus de restaurantes e ingressos para shows, até convites de calendário online, pagamentos e a lista continua. Neste tutorial, você aprenderá como criar um código QR usando a biblioteca JavaScript React. O benefício de usar o React é que ele facilita a criação de aplicativos de front-end, pois fornece aos desenvolvedores maneiras de reutilizar componentes. Para seguir este tutorial, o seguinte será abordado: Pré-requisitos Começando Criando um gerador de código QR Estilizando o aplicativo de código QR Baixando o código QR gerado Conclusão Recursos Demonstração Pré-requisitos Para concluir este tutorial, você precisa do seguinte: Compreensão básica do React.js instalado em sua máquina local Nó >= 14.0.0 e npm >= 5.6 Começando Antes de escrever uma linha de código, abra seu terminal e execute o seguinte comando: npx create-react-app qrcode-generator O comando acima monta os arquivos e instala alguns pacotes necessários para criar o aplicativo React. Em seguida, navegue até o diretório do projeto e execute o servidor de desenvolvimento que pode ser acessado em usando o comando abaixo para visualizar o aplicativo no navegador: http://localhost:3000 npm start cd qrcode-generator Finalmente, vamos instalar a biblioteca de dependência necessária para criar o gerador de código QR. Execute o comando: npm install qrcode.react : um componente React para gerar códigos QR para renderização no DOM. qrcode.react Criando um gerador de código QR Ótimo trabalho até agora! A criação do gerador de código QR começará com a criação dos arquivos e componentes que conterão a estrutura do código QR. Dentro do diretório src, crie uma pasta chamada components e um arquivo chamado QrCode.js na pasta. Copie e cole o seguinte código: e.preventDefault(); }; setUrl(e.target.value); }; ); ); }; // src/components/QrCode.js import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const downloadQRCode = ( e ) => { setUrl( "" ); const qrCodeEncoder = ( e ) => { const qrcode = ( return ( {qrcode} Enter URL Download QR code export default QrCode; Os trechos de código acima fazem o seguinte: Importar é usado para declarar o estado inicial da variável, url que é definido como uma string vazia e o função, usado para atualizar o estado useState setState setUrl A biblioteca, , é usado para renderizar o código QR gerado qrcode.react A seguir, o uso do função anexada ao método do elemento, pois isso é acionado pelo evento submit downloadQRCode onSubmit No elemento, o manipulador de eventos com a função recebe a entrada dos usuários, obtém seu valor e altera o código QR a cada nova entrada digitada onChange 'qrCodeEncoder' Uma variável é criado. leva no componente e passa alguns prompts disponíveis que personalizam e tornam o código QR visível no navegador. Confira a documentação para saber mais sobre o no componente qrcode QRCodeCanvas uso de props finalmente, o elemento é desabilitado até que a entrada do usuário receba dados Estilizando o aplicativo de código QR No pasta, crie a folha de estilo, responsável pelo apelo visual do aplicativo src styles.css Copie e cole o seguinte código: *, *:before, *:after { } } } } } } } } } } } } } } } /* src/styles.css */ margin: 0 ; padding : 0 ; box-sizing : border-box; :root { -- font - color : 230 35% 7% ; body { color : hsl ( var (--font-color)); img { max-width : 100% ; display : block; .section { padding : 2em 0 ; display : flex; min-height : 100vh ; align-items : center; .container { margin -inline: auto; max-width : 75rem ; width : 85% ; .input__group { display : flex; margin-top : 2em ; input { width : 100% ; padding : 1em 0.75em ; border : 1px solid #444343 ; border-radius : 3px ; margin-bottom : 2em ; margin-top : 0.75em ; button { border : unset; background : hsl ( 231 , 77% , 90% ); padding : 1em 0.75em ; color : hsl ( var (--font-color)); cursor : pointer; text-transform : uppercase; font-weight : bold; @media screen and ( min-width : 768px ) { .section { padding : 0 ; input { margin : 0 ; .qrcode__container { display : flex; align-items : center; .input__group { margin-left : 3em ; input { margin-bottom : 2em ; margin-top : 0.75em ; font-size : 1rem ; Em seguida, importe o arquivo QrCode.js e a folha de estilo no ponto de entrada do aplicativo, App.js: ); } // src/App.js import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) { return ( Com as etapas concluídas, o aplicativo deve ficar assim: Baixando o código QR gerado A opção para os usuários baixarem o código QR gerado torna-o útil em uma ampla variedade de casos de uso. Desde imprimir o código até incorporá-lo em um site, os casos de uso são ilimitados. De volta ao arquivo, vamos atualizar a base de código para usar para acessar os nós do modelo de objeto de documento (DOM). components/QrCode.js refs ... ); ); }; // src/components/QrCode.js import { useState, useRef } from "react" ; // other import const QrCode = () => { const [url, setUrl] = useState( "" ); const qrRef = useRef(); // include this: call the useRef function const qrcode = ( return ( {qrcode} {/* include this */} {/* form input container */} export default QrCode; Agora, vamos atualizar o função no arquivo para poder clicar no botão de download do código QR e salvar a tela como um arquivo de imagem. downloadQRCode QrCode.js e.preventDefault(); anchor.href = image; anchor.click(); }; ... ); }; // src/components/QrCode.js // imports const QrCode = () => { // state // useRef const downloadQRCode = ( e ) => { let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.download = `qr-code.png` ; document .body.appendChild(anchor); document .body.removeChild(anchor); setUrl( "" ); return ( {qrcode} {/* form input container */} export default QrCode; No função, ocorre o seguinte: downloadQRCode Ele referencia o valor atual do objeto ref com a propriedade .current para saber quando o nó muda o componente produz o elemento canvas no DOM que lhe dá a capacidade de criar conteúdo dinamicamente qrcode.react A tela é anexada ao método com o parâmetro de tipo especificado definido para o formato de arquivo, toDataURL image/png Em seguida, a âncora, elemento é criado e o está definido para a imagem que baixa o código QR quando o botão é clicado href O elemento âncora é anexado ao corpo do documento e, assim que o código QR é baixado, ele é removido Finalmente, o URL do estado é atualizado com o variável que limpa a entrada para o código QR gerado conforme o formulário é enviado setUrl O código completo para o componente QrCode.js: e.preventDefault(); anchor.href = image; anchor.click(); }; setUrl(e.target.value); }; ); ); }; import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const qrRef = useRef(); const downloadQRCode = ( e ) => { let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.download = `qr-code.png` ; document .body.appendChild(anchor); document .body.removeChild(anchor); setUrl( "" ); const qrCodeEncoder = ( e ) => { const qrcode = ( return ( {qrcode} Enter URL Download QR code export default QrCode; O resultado final do aplicativo deve ficar assim: Conclusão Este tutorial descreveu o processo de criação de um gerador de código QR e como ele pode ser baixado para uso posterior. Recursos Código QR O elemento âncora Tudo sobre código QR