¿Cómo generar un código QR usando ‘react-qr-code’ en ReactJS?

El siguiente enfoque cubre cómo generar QR-Code en React. Hemos utilizado el paquete react-qr-code para lograrlo. El código QR es una cuadrícula cuadrada que se puede leer fácilmente con dispositivos digitales como teléfonos inteligentes. Aquí, para el código QR, vamos a usar un paquete npm llamado react-qr-code . 

Sintaxis:

<QRCode  
   title="title"
   value="value"
   bgColor="background-color"
   fgcolor="foreground-color"
   level="level"
   size={number}
/>

Tipos de prop:

• value: Es el valor del Qr-code.
• title: Es el título del Qr-code.
• bgcolor: Es el color de fondo del Qr-code.
• fgcolor: Es el color de primer plano del código Qr.
• size: Es el tamaño del Qr-code.
• level: Define el nivel de Qr-code.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree la aplicación React usando el comando:

npx create-react-app gfg-qrcode

Paso 2: ahora muévase a la carpeta de su proyecto, es decir, gfg-qrcode, usando este comando:

cd gfg-qrcode

Paso 3: ahora instale el paquete en la carpeta de su proyecto usando el siguiente comando:

npm install react-qr-code

Estructura del proyecto: Se verá así.

Ejemplo: Para crear la funcionalidad del código Qr en ReactJS. Escriba el siguiente código en el archivo App.js.

import { useState } from 'react';
import QRCode from 'react-qr-code';
  
function App() {
  const [value, setValue] = useState();
  const [back, setBack] = useState('#FFFFFF');
  const [fore, setFore] = useState('#000000');
  const [size, setSize] = useState(256);
  
  return (
    <div className="App">
      <center>
        <br />
        <br />
        <input
          type="text"
          onChange={(e) => setValue(e.target.value)}
          placeholder="Value of Qr-code"
        />
        <br />
        <br />
        <input
          type="text"
          onChange={(e) => setBack(e.target.value)}
          placeholder="Background color"
        />
        <br />
        <br />
        <input
          type="text"
          onChange={(e) => setFore(e.target.value)}
          placeholder="Foreground color"
        />
        <br />
        <br />
        <input
          type="number"
          onChange={(e) => setSize(parseInt(e.target.value === 
                           '' ? 0 : e.target.value, 10))}
          placeholder="Size of Qr-code"
        />
        <br />
        <br />
        <br />
        {value && (
          <QRCode
            title="GeeksForGeeks"
            value={value}
            bgColor={back}
            fgColor={fore}
            size={size === '' ? 0 : size}
          />
        )}
      </center>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://www.npmjs.com/package/react-qr-code