DEV Community

Cover image for Generating QR Codes using React
Daniel Onugha
Daniel Onugha

Posted on

Generating QR Codes using React

Generating QR Codes using React
QR code (quick response code) were the first retailer here to offer QR codes in their advertising, it can be read easily by a digital device and which stores information as a series of pixels in a square-shaped grid.
It’s a machine-readable code consisting of any array of black and white squares, typically used for sorting URLs or other information for reading by the camera on a smartphone.
A QR code (an initialism for quick response code) is a type of matrix barcode (or two-dimensional barcode)invented in 1994 by the Japanese automotive company Denso Wave. A barcode is a machine-readable optical label that can contain information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. QR codes use four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently; extensions may also be used.
Goal
In this article, we are going to display how to create QR Codes in React.js applications.

Table of Content

  • Introduction
  • Installing and Setting up React
  • Creating our Components
  • Using the QR code package
  • Making use of the QR Code Reader
  • Conclusion

Installing and Setting up React
The next step is to install our react before we create our form application. Note there are two ways we can use this library: NPM and CDN, but in this article, we will install the application using NPM.

Install the React application using the following command:

npx create-react-app qrcode
Enter fullscreen mode Exit fullscreen mode

We have successfully installed our react application under QR code.

Creating our Components
Here we’ll have to create our component folder, the App.js and the Index.js which we’ll use in working
This is the index.js format:

Index.js

Below is the App.js file

App.js

Breaking it down in the index.js, I can pass in text which is meant to represent the value of the QR code, because every QR code represent a value either numeric, alphanumeric, byte/binary or kanji. Our own is representing “worn off keys” , then the QR code represent worn off keys will then be displayed

<App text="worn off keys" />
Enter fullscreen mode Exit fullscreen mode

In the App.js, to use the QR code package [import QRCode from ‘qrcode’] that we imported to be able to generate a proper source and then setting it inside the variable using the “setSrc” function below;

useEffect(() => {
  QRCode.toDataURL(text).then(setSrc);
}, []);
Enter fullscreen mode Exit fullscreen mode

This is how our App looks .

Our App

The size of the QR Code is the depending on size of the data provided in the App.js text code block because it gets to store more data;

<
    App text="wornoffkeys.comwornoffkeys.comwornoffkeys.comwornoffkeys.comwornoffkeys.com" />
);
Enter fullscreen mode Exit fullscreen mode

Conclusion
QR codes can provide more information about the product or service without a sweat, and the information quickly goes to the user's device. Basically, QR codes promote interaction and engagement through the mobile phone. This type of marketing strategy enables businesses to transfer information to the user.

Today we’re able to produce QR codes using the QR code` library and React, as we’ve seen.

Top comments (6)

Collapse
 
aarone4 profile image
Info Comment hidden by post author - thread only accessible via permalink
Aaron Reese

I'm sorry, but your article title is misleading (IMHO) it's not really about how to create a QR code in React, it is about how to import a package and pass it a prop.
I was hoping to would show how to take an existing JS library and wrap in it up so that it could be used within React, or even better, how to write the algorithm that renders the QR code image and then wrap it as a React component

Collapse
 
mrepol742 profile image
Info Comment hidden by post author - thread only accessible via permalink
Melvin Jones Repol

its just the how to use the qrcode package for me...

Collapse
 
aarone4 profile image
Info Comment hidden by post author - thread only accessible via permalink
Aaron Reese

in which case the title should have been "Here is a QR oackage for React" All the artice is really saying is here is an NPM package that solves a problem and this is it;s API specification. It could have been any npm package.

Collapse
 
marialopez1 profile image
marialopez1

Nice 👍
This is nice for a start 🤗
Keep it up and be focused dear

Collapse
 
danielonugha0 profile image
Daniel Onugha

Thanks ma'am
I'm trying my best 💯✅

Collapse
 
aarone4 profile image
Info Comment hidden by post author - thread only accessible via permalink
Aaron Reese • Edited

also the instructions don't tell us which npm package you have installed for the QRCode.

Some comments have been hidden by the post's author - find out more