How to create a QR code in React JS?

To create a QR code in React, you can use the qrcode.react library, which provides a simple way to generate QR codes. Here’s how you can do it:

Install the qrcode.react library:

npm install qrcode.react

Import and use the library in your React component:

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

function QRCodeGenerator({ data }) {
  return (
    <div>
      <QRCode value={data} />
    </div>
  );
}

export default QRCodeGenerator;

In this example, the QRCodeGenerator component takes a data prop, which is the content you want to encode into the QR code. The QRCode component from the qrcode.react library generates the actual QR code image based on the provided value.

You can use this component like this:

<QRCodeGenerator data="https://www.techradiant.com" />

Replace "https://www.techradiant.com" with the data you want to encode as a QR code.

The qrcode.react library also allows you to customize the QR code by passing various props to the QRCode component, such as size, level, and more. Check the library’s documentation for more customization options.

Remember to handle errors and edge cases in a production scenario.