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
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.
If you like this, share this.