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.
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
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA