Cómo generar un código QR en React con easyqrcodejs

El código QR (Código de Respuesta Rápida) es una forma conveniente de almacenar y transferir datos, comúnmente utilizado en la compartición de enlaces y pagos. En un proyecto de React, podemos generar fácilmente códigos QR utilizando la biblioteca easyqrcodejs, que admite estilos personalizados e incrustación de logotipos. Este artículo detalla los pasos y métodos para generar un código QR en React utilizando easyqrcodejs.

Instalación de easyqrcodejs

Antes de comenzar, asegúrate de haber creado un proyecto de React. Si aún no tienes uno, puedes crear rápidamente uno con create-react-app. Luego, instala la biblioteca easyqrcodejs con el siguiente comando:

1
npm install easyqrcodejs

Uso básico

Para utilizar easyqrcodejs en React, puedes generar un código QR cuando el componente se monte utilizando el hook useEffect. A continuación se muestra un ejemplo simple de generación de código QR.

Ejemplo de código

1
import React, { useEffect, useRef } from "react";
2
import QRCode from "easyqrcodejs";
3

4
const QRCodeComponent = () => {
5
  const qrCodeRef = useRef(null);
6

7
  useEffect(() => {
8
    // Configurar los parámetros del código QR
9
    const options = {
10
      text: "https://www.example.com", // Contenido del código QR
11
      width: 200, // Ancho del código QR
12
      height: 200, // Alto del código QR
13
      colorDark: "#000000", // Color de las partes oscuras del código QR
14
      colorLight: "#ffffff", // Color de las partes claras del código QR
15
      correctLevel: QRCode.CorrectLevel.H, // Nivel de corrección, H es el más alto
16
    };
17

18
    // Crear una instancia de QRCode y renderizarla en el nodo del DOM
19
    new QRCode(qrCodeRef.current, options);
20
  }, []);
21

22
  return (
23
    <div>
24
      <h2>Ejemplo de código QR</h2>
25
      <div ref={qrCodeRef}></div>
26
    </div>
27
  );
28
};
29

30
export default QRCodeComponent;

Descripción de los parámetros

En el ejemplo anterior, easyqrcodejs proporciona varios parámetros para personalizar el código QR:

• text: El contenido del código QR (como una URL o cadena de texto).
• width y height: Controlan el ancho y alto del código QR.
• colorDark y colorLight: Establecen los colores del código QR, normalmente una combinación de oscuro y claro.
• correctLevel: El nivel de corrección, que puede ser L, M, Q, H, siendo H el de mayor tolerancia a errores, ideal para códigos QR con logotipos.

Incrustar un logotipo en el código QR

A veces, es necesario incrustar un logotipo en el centro del código QR, como el logotipo de una empresa o el icono de una aplicación. easyqrcodejs ofrece una forma sencilla de hacerlo. Solo necesitamos agregar la configuración relacionada con el logotipo en los parámetros del código QR.

Ejemplo de código

1
import React, { useEffect, useRef } from "react";
2
import QRCode from "easyqrcodejs";
3

4
const QRCodeWithLogo = () => {
5
  const qrCodeRef = useRef(null);
6

7
  useEffect(() => {
8
    const options = {
9
      text: "https://www.example.com",
10
      width: 200,
11
      height: 200,
12
      colorDark: "#000000",
13
      colorLight: "#ffffff",
14
      correctLevel: QRCode.CorrectLevel.H,
15
      // Incrustar logotipo
16
      logo: "https://www.example.com/logo.png", // URL de la imagen del logotipo
17
      logoWidth: 50,
18
      logoHeight: 50,
19
      logoBackgroundTransparent: true, // Fondo transparente para logotipos sin fondo blanco
20
    };
21

22
    new QRCode(qrCodeRef.current, options);
23
  }, []);
24

25
  return (
26
    <div>
27
      <h2>Código QR con logotipo</h2>
28
      <div ref={qrCodeRef}></div>
29
    </div>
30
  );
31
};
32

33
export default QRCodeWithLogo;

Descripción de los parámetros

• logo: Puede ser una ruta local o una URL que especifica el logotipo a incrustar en el código QR.
• logoWidth y logoHeight: Controlan el tamaño del logotipo.
• logoBackgroundTransparent: Establece si el fondo del logotipo es transparente, ideal para logotipos sin fondo.

Conclusión

easyqrcodejs es una poderosa herramienta para generar códigos QR. Ofrece una amplia gama de opciones de configuración y permite generar códigos QR fácilmente en un proyecto de React, incluyendo la incrustación de logotipos. Puedes personalizar el estilo, tamaño, color y nivel de corrección del código QR para hacerlo más atractivo y funcional.

Con la información presentada en este artículo, espero que puedas dominar el uso básico y avanzado de easyqrcodejs para generar códigos QR en React. Si necesitas generar códigos QR más complejos, easyqrcodejs ofrece muchas más opciones de personalización que puedes explorar.