57,362 leituras

Como construir um gerador de código QR em React

por Teri Eyenike8m2022/07/01

Muito longo; Para ler

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.

Company Mentioned

featured image - Como construir um gerador de código QR em React

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

Nó >= 14.0.0 e npm >= 5.6 instalado em sua máquina local

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

 http://localhost:3000

usando o comando abaixo para visualizar o aplicativo no navegador:

 cd qrcode-generator npm start

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

 qrcode.react

: um componente React para gerar códigos QR para renderização no DOM.

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:

 // src/components/QrCode.js
import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const downloadQRCode = ( e ) => {  e.preventDefault();  setUrl( "" ); };  const qrCodeEncoder = ( e ) => {  setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "https://hackernoon.com"
     />
          < button type = "submit" disabled = {!url} >
      Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

Os trechos de código acima fazem o seguinte:

Importar
```
 useState
```
é usado para declarar o estado inicial da variável, url que é definido como uma string vazia e o
```
 setState
```
função,
```
 setUrl
```
usado para atualizar o estado
A biblioteca,
```
 qrcode.react
```
, é usado para renderizar o código QR gerado

A seguir, o uso do
```
 downloadQRCode
```
função anexada ao
```
 onSubmit
```
método do
```
 <form>
```
elemento, pois isso é acionado pelo evento submit
No
```
 <input>
```
elemento, o
```
 onChange
```
manipulador de eventos com a função
```
 'qrCodeEncoder'
```
recebe a entrada dos usuários, obtém seu valor e altera o código QR a cada nova entrada digitada

Uma variável
```
 qrcode
```
é criado. leva no
```
 QRCodeCanvas
```
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 uso de props no componente

finalmente, o
```
 <button>
```
elemento é desabilitado até que a entrada do usuário receba dados

Estilizando o aplicativo de código QR

src

pasta, crie a folha de estilo,

 styles.css

responsável pelo apelo visual do aplicativo

Copie e cole o seguinte código:

 /* src/styles.css */
*, *:before, *:after { 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 (    < div className = "section container" >
      < QrCode />
    </ div >
 ); }

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

 components/QrCode.js

arquivo, vamos atualizar a base de código para usar

 refs

para acessar os nós do modelo de objeto de documento (DOM).

 // 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 = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div > {/* include this */}   {/* form input container */}    </ div >
 ); }; export default QrCode;

Agora, vamos atualizar o

 downloadQRCode

função no

 QrCode.js

arquivo para poder clicar no botão de download do código QR e salvar a tela como um arquivo de imagem.

 // src/components/QrCode.js
// imports
const QrCode = () => {  // state
  // useRef
  const downloadQRCode = ( e ) => {  e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" );  anchor.href = image;  anchor.download = `qr-code.png` ;    document .body.appendChild(anchor);  anchor.click();    document .body.removeChild(anchor);  setUrl( "" ); }; ...  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
   {/* form input container */}    </ div >
 ); }; export default QrCode;

 downloadQRCode

função, ocorre o seguinte:

Ele referencia o valor atual do objeto ref com a propriedade .current para saber quando o nó muda

o
```
 qrcode.react
```
componente produz o elemento canvas no DOM que lhe dá a capacidade de criar conteúdo dinamicamente

A tela é anexada ao
```
 toDataURL
```
método com o parâmetro de tipo especificado definido para o formato de arquivo,
```
 image/png
```

Em seguida, a âncora,
```
 <a>
```
elemento é criado e o
```
 href
```
está definido para a imagem que baixa o código QR quando o botão é clicado

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
```
 setUrl
```
variável que limpa a entrada para o código QR gerado conforme o formulário é enviado

O código completo para o componente QrCode.js:

 import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const qrRef = useRef();  const downloadQRCode = ( e ) => { e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" ); anchor.href = image; anchor.download = `qr-code.png` ;    document .body.appendChild(anchor); anchor.click();    document .body.removeChild(anchor); setUrl( "" ); };  const qrCodeEncoder = ( e ) => { setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "} />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "https://hackernoon.com"
 />
          < button type = "submit" disabled = {!url} >
 Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; 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

L O A D I N G
. . . comments & more!

About Author

Teri Eyenike@terieyenike

I am a frontend developer with a particular interest in making things simple and usable.

Read my stories Book a call with @terieyenike