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
How to validate form in ReactJS
How to create charts in ReactJS
For more React Tutorials Click here, Node.js Tutorials Click here.
If you like this, share this.
Follow us on Facebook, Twitter, Tumblr, LinkedIn, YouTube.
Comments are closed.