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 usereact-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 thispackage here.

Installation – QR Code Package in React

yarn add react-qr-code

When using this library with React Native, you will also need to havereact-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.

importReactfrom"react";importReactDOMfrom"react-dom";importQRCodefrom"react-qr-code";ReactDOM.render(<QRCodevalue="hey"/>,document.getElementById("Container"));

We have also someprops like bgColor, fgColor, level, size, title and value, read indetail 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 pleasevisit my website.

Thanks:)
Happy Coding:)