How to Generate QR Codes in React Using easyqrcodejs

QR Code is a convenient way to store and transfer data, commonly seen in URL sharing, payments, and more. In React projects, with the help of the easyqrcodejs library, we can easily generate QR codes with custom styles and embed logos. This article will explain the steps and methods for generating QR codes in React using easyqrcodejs in detail.

Installing easyqrcodejs

Before we start, make sure you have a React project set up. If you don’t have one yet, you can quickly create it using create-react-app. Then, install the easyqrcodejs library with the following command:

1
npm install easyqrcodejs

Basic Usage

To use easyqrcodejs in React, you can generate a QR code using the useEffect hook when the component is mounted. Below is a simple example of QR code generation.

Code Example

1
import React, { useEffect, useRef } from "react";
2
import QRCode from "easyqrcodejs";
3

4
const QRCodeComponent = () => {
5
  const qrCodeRef = useRef(null);
6

7
  useEffect(() => {
8
    // QR code configuration
9
    const options = {
10
      text: "https://www.example.com", // QR code content
11
      width: 200, // QR code width
12
      height: 200, // QR code height
13
      colorDark: "#000000", // Color of the dark parts of the QR code
14
      colorLight: "#ffffff", // Color of the light parts of the QR code
15
      correctLevel: QRCode.CorrectLevel.H, // Error correction level, H being the highest
16
    };
17

18
    // Create QR code instance and render to the DOM
19
    new QRCode(qrCodeRef.current, options);
20
  }, []);
21

22
  return (
23
    <div>
24
      <h2>QR Code Example</h2>
25
      <div ref={qrCodeRef}></div>
26
    </div>
27
  );
28
};
29

30
export default QRCodeComponent;

Parameter Explanation

In the above example, easyqrcodejs offers various parameters to customize the QR code:

• text: The content to encode into the QR code (such as URLs, strings, etc.).
• width and height: Control the QR code’s dimensions.
• colorDark and colorLight: Set the QR code’s colors, typically using contrasting dark and light colors.
• correctLevel: The error correction level, with options L, M, Q, and H, where H has the highest error correction level, suitable for QR codes with logos embedded.

Embedding a Logo in a QR Code

Sometimes, we may want to embed a logo in the center of the QR code, such as a company logo or app icon. easyqrcodejs provides a simple way to achieve this by adding logo-related configurations in the QR code options.

Code Example

1
import React, { useEffect, useRef } from "react";
2
import QRCode from "easyqrcodejs";
3

4
const QRCodeWithLogo = () => {
5
  const qrCodeRef = useRef(null);
6

7
  useEffect(() => {
8
    const options = {
9
      text: "https://www.example.com",
10
      width: 200,
11
      height: 200,
12
      colorDark: "#000000",
13
      colorLight: "#ffffff",
14
      correctLevel: QRCode.CorrectLevel.H,
15
      // Embed a logo
16
      logo: "https://www.example.com/logo.png", // URL of the logo image
17
      logoWidth: 50,
18
      logoHeight: 50,
19
      logoBackgroundTransparent: true, // Transparent background, suitable for logos without a white background
20
    };
21

22
    new QRCode(qrCodeRef.current, options);
23
  }, []);
24

25
  return (
26
    <div>
27
      <h2>QR Code with Logo</h2>
28
      <div ref={qrCodeRef}></div>
29
    </div>
30
  );
31
};
32

33
export default QRCodeWithLogo;

Parameter Explanation

• logo: Can be a local path or URL, used to specify the logo to embed in the QR code.
• logoWidth and logoHeight: Control the size of the logo.
• logoBackgroundTransparent: Whether to make the logo background transparent, usually applicable to logos without a background.

Conclusion

easyqrcodejs is a powerful tool for generating QR codes with many configuration options, allowing easy QR code generation in React projects and embedding logos as needed. By customizing the parameters, you can control the QR code’s style, size, color, and error correction level, making the QR codes more visually appealing and functional.

With the explanations in this article, I hope you’ve learned the basic and advanced ways to generate QR codes in React using easyqrcodejs. If you need to create more complex QR codes, easyqrcodejs also offers additional customization options for you to explore.