58,336 lecturas

Cómo construir un generador de códigos QR en React

por Teri8m2022/07/01

Demasiado Largo; Para Leer

La idea detrás de la creación de un generador de código de respuesta rápida (QR) es traducir datos de imágenes a texto. Un código QR es simplemente la representación de datos de imágenes como texto, y tiene muchas aplicaciones útiles, desde menús de restaurantes y entradas para conciertos, hasta invitaciones de calendario en línea, pagos, y la lista continúa.

Company Mentioned

featured image - Cómo construir un generador de códigos QR en React

En este tutorial, aprenderá cómo crear un código QR utilizando la biblioteca de JavaScript, React. El beneficio de usar React es que hace que la creación de aplicaciones frontend sea muy sencilla, ya que proporciona a los desarrolladores formas de reutilizar componentes.

Para seguir este tutorial, se cubrirá lo siguiente:

requisitos previos
Empezando
Creación de un generador de códigos QR
Diseñar la aplicación de código QR
Descarga del código QR generado
Conclusión
Recursos

Manifestación

requisitos previos

Para completar este tutorial, necesita lo siguiente:

Comprensión básica de React.js

Nodo >= 14.0.0 y npm >= 5.6 instalado en su máquina local

Empezando

Antes de escribir una línea de código, abre tu terminal y ejecuta el siguiente comando:

 npx create-react-app qrcode-generator

El comando anterior crea andamios en los archivos e instala algunos paquetes necesarios para crear la aplicación React.

A continuación, navegue hasta el directorio del proyecto y ejecute el servidor de desarrollo al que se puede acceder en

 http://localhost:3000

usando el siguiente comando para obtener una vista previa de la aplicación en el navegador:

 cd qrcode-generator npm start

Finalmente, instalemos la biblioteca de dependencias requerida para crear el generador de códigos QR. Ejecute el comando:

 npm install qrcode.react

 qrcode.react

: un componente de React para generar códigos QR para renderizar al DOM.

Creación de un generador de código QR

¡Gran trabajo hasta ahora!

La creación del generador de códigos QR comenzará con la creación de los archivos y componentes que contendrán la estructura del código QR. Dentro del directorio src, cree una carpeta llamada components y un archivo llamado QrCode.js en la carpeta.

Copia y pega el siguiente 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;

Los fragmentos de código anteriores hacen lo siguiente:

Importar
```
 useState
```
se utiliza para declarar el estado inicial de la variable, url que se establece en una cadena vacía, y el
```
 setState
```
función,
```
 setUrl
```
utilizado para actualizar el estado
La biblioteca,
```
 qrcode.react
```
, se utiliza para representar el código QR generado

A continuación, el uso de la
```
 downloadQRCode
```
función adjunta a la
```
 onSubmit
```
metodo de la
```
 <form>
```
elemento ya que esto es activado por el evento de envío
Sobre el
```
 <input>
```
elemento, el
```
 onChange
```
controlador de eventos con la función
```
 'qrCodeEncoder'
```
toma la entrada de los usuarios, obtiene su valor y cambia el código QR con cada nueva entrada escrita

Una variable
```
 qrcode
```
es creado. Toma en el
```
 QRCodeCanvas
```
componente y pasa algunas indicaciones disponibles que personalizan y hacen que el código QR sea visible en el navegador. Consulte la documentación para obtener más información sobre el uso de accesorios en el componente.

Finalmente, el
```
 <button>
```
el elemento está deshabilitado hasta que la entrada del usuario recibe datos

Diseñar la aplicación de código QR

En el

src

carpeta, crea la hoja de estilo,

 styles.css

responsable del atractivo visual de la aplicación

Copia y pega el siguiente 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 ; } }

A continuación, importe el archivo QrCode.js y la hoja de estilo en el punto de entrada de la aplicación, App.js:

 // src/App.js
import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) {  return (    < div className = "section container" >
      < QrCode />
    </ div >
 ); }

Con los pasos completos, la aplicación debería verse así:

Descarga del código QR generado

La opción para que los usuarios descarguen el código QR generado lo hace útil en una amplia variedad de casos de uso. Desde imprimir el código hasta incrustarlo en un sitio web, los casos de uso son ilimitados.

Regreso en el

 components/QrCode.js

archivo, actualicemos el código base para usar

 refs

para acceder a los nodos del 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;

Ahora, actualicemos el

 downloadQRCode

función en el

 QrCode.js

archivo para poder hacer clic en el botón de descarga del código QR y guardar el lienzo como un archivo de imagen.

 // 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;

En el

 downloadQRCode

función, ocurre lo siguiente:

Hace referencia al valor actual del objeto ref con la propiedad .current para saber cuándo cambia el nodo

los
```
 qrcode.react
```
El componente produce el elemento de lienzo en el DOM que le brinda la capacidad de crear contenido dinámicamente

El lienzo se adjunta a la
```
 toDataURL
```
método con el parámetro de tipo especificado establecido en el formato de archivo,
```
 image/png
```

A continuación, el ancla,
```
 <a>
```
se crea el elemento y el
```
 href
```
se establece en la imagen que descarga el código QR cuando se hace clic en el botón

El elemento de anclaje se adjunta al cuerpo del documento y, una vez que se descarga el código QR, se elimina

Finalmente, la URL del estado se actualiza con el
```
 setUrl
```
variable que borra la entrada del código QR generado a medida que se envía el formulario

El código completo para el 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;