Binary Coffee

C贸mo crear C贸digos QR con React

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.

Recomendado

Opiniones