How to create 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.

Recommendation

Using MongoDB in Node.js

How to validate form in ReactJS

Using MongoDB with Laravel

How to create charts in ReactJS

Basic Query In MongoDB

Types of Storage For React

For more React Tutorials Click here, Node.js Tutorials Click here.