Creating a QR Code Example in React

QR codes are a popular way to encode data for easy scanning with a mobile device. In this tutorial, we’ll create a simple QR code example using the qrcode package and React.

Prerequisites

To follow this tutorial, you’ll need basic knowledge of HTML, CSS, and JavaScript. You’ll also need to have Node.js and npm installed on your computer.

Setting up the React Application

First, let’s create a new React application using Create React App. Open a terminal and run the following commands:

npx create-react-app qr-code-example
cd qr-code-example
npm start

This will create a new React application and start the development server.

Installing the QR Code Package

Next, let’s install the qrcode package, which will generate the QR code for us. Run the following command in your terminal:

npm install qrcode

Creating the QR Code Component

Now, let’s create a new component that will generate the QR code. In the src folder, create a new file called QRCode.js and add the following code:

import React from 'react';
import QRCodeGenerator from 'qrcode';

class QRCode extends React.Component {
  constructor(props) {
    super(props);

    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    this.generateQRCode();
  }

  generateQRCode() {
    QRCodeGenerator.toCanvas(this.canvasRef.current, this.props.value, {
      errorCorrectionLevel: 'H',
      margin: 2,
      scale: 6,
    });
  }

  render() {
    return (
      <canvas ref={this.canvasRef}></canvas>
    );
  }
}

export default QRCode;

This component defines a canvas element that will display the QR code. In the componentDidMount method, we call the generateQRCode method, which uses the toCanvas function from the qrcode package to generate the QR code and draw it on the canvas.

We pass the value of the QR code as a prop to the component, and we also define some options for the QR code, including the error correction level, margin, and scale.

Using the QR Code Component

Now that we have our QRCode component, let’s use it in our app. Open the App.js file in the src folder, and replace the existing code with the following:

import React from 'react';
import QRCode from './QRCode';

function App() {
  return (
    <div className="App">
      <QRCode value="https://www.example.com" />
    </div>
  );
}

export default App;

This code imports our QRCode component and renders it with a value of “https://www.example.com“. You can replace this value with any URL or other data that you want to encode as a QR code.

Styling the QR Code

Finally, let’s add some basic styles to the QR code to make it look better. Add the following CSS code to the index.css file in the src folder:

canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

This code sets the canvas element to be a block element with a max-width of 100%, and centers it horizontally with margin: 0 auto.

Thanks for reading please let me know doubts in comment section