Creating QR Code in React

QR Code stands for “quick response” code. It is capable of storing lots of data. It is basically a barcode on steroids. While the barcode holds information horizontally, the QR code does so both horizontally and vertically. When we scans the QR code we can access the information immediately. Here we will see how to create QR Code in react websites or react native apps, the approach will be same for both React JS website and React Native by using the node package.

Create QR Code in React

Here we will use react-qr-code node package. It is basically a component for creating QR Code. This library works with React and React Native. You can read about this package here.

Installation – QR Code Package in React

yarn add react-qr-code

When using this library with React Native, you will also need to have react-native-svg installed.

Using QRCode Component in React

Now, we have Component. We can use this easily by importing and passing some props. Here below is an example usage.

import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));

We have also some props like bgColor, fgColor, level, size, title and value, read in detail here. And After Implementation you will get result like the image showing below.

Please like share and give positive feedback to motivate me to write more for you.

For more tutorials please visit my website.

Thanks:)
Happy Coding:)