Cómo crear Códigos QR con React

Los Códigos QR tienen mucha popularidad en estos días al igual que la librería de JS React, es por ello que te enseño: Cómo generar Códigos QR en React usando react-qr-code.

Lo primero que necesitamos es crear un proyecto, para ello ejecutamos en la consola:

# usando yarn
yarn global add create-react-app
create-react-app qr-code-react
cd qr-code-react
yarn start

# usando npm
npm install -g create-react-app
create-react-app qr-code-react
cd qr-code-react
npm start

Luego necesitamos instalar la librería react-qr-code desde la consola.

#usando yarn
yarn add react-qr-code

#usando yarn
npm install react-qr-code

Luego corremos nuevamente el proyecto. Ahora vamos a modificar el archivo App.js situado en la carpetasrc. Y lo vamos a dejar como sigue:

import QRCode from "react-qr-code";
import './App.css';

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <QRCode value="Hola Mundo" size={256} bgColor="#282c34" fgColor="#fff" level="H" />
      </header>
    </div>
  );
}

export default App;

Como podrás apreciar importamos QRCode de la librería que acabamos de instalar y si vas al navegador observarás el código qr creado.

Ahora, ¿qué significa? <QRCode value="Hola Mundo" size={256} bgColor="#282c34" fgColor="#fff" level="H" />. Pues simplemente le estamos pasando propiedades al componente.

value: Es el texto que se va a codificar en el QR.
size: El tamaño que va a tener tanto en ancho como en altura.
bgColor: El color de fondo.
fgColor: El color de relleno.
level: La capacidad de podel leer el contenido del QR aunque tenga una parte dañada.
- Level L (Low): 7% puede ser restaurado.
- Level M (Medium): 15% puede ser restaurad0.
- Level Q (Quartile): 25% puede ser restaurado.
- Level H (High): 30% puede ser restaurado.

Puedes ver como queda la aplicación final con algunas modificaciones en http://qr-code-generator.netlify.app/.

Tienes todo el código disponible en https://github.com/raulcr98/qr-generator-react.