How To Create Qr Code With URL In React

A QR code is a structure made up of a series of black and white squares to store information. With a QR code reader or a smartphone camera that supports reading, the information stored in the qr code can be detected.

In this article, we will show you how to store a URL to a QR code and display it in a react application using the qrious package.

Let's get started.

Install the package using npm

npm install qrious

Create QR Code Instance

You can create a seperate qr code component to display it. We only display qr code generated by the qrious package in the app.js file.

import QRious from "qrious";

function App() {
  // Create an instance
  const qr = new QRious({
    // Set a url to the value key
    value: "https://www.google.com",
  });

  return (
    <div className="App">
      {/* You can give style to the qr code */}
      <img style={{ width: "200px", height: "200px" }} src={qr.toDataURL()} />
    </div>
  );
}

export default App;

Conclusion

That's all. After running your reactjs application, you can use your mobile phone to read the specified qr code.

If you learn more about reactjs, then you can check the articles below:

• React Dynamic Table
• Axios Instance In React
• Handle Right Click In React

Thank you for reading.