Integrating QR Codes With React

Example QR code generated and displayed using React

Qr codes are a great technology for storing information in an easily sendable and scannable matter (hence the name Quick Response codes). I am going to show you how you can integrate this technology into your React website.

Step 1: Installing the QR code npm

First thing you need to do is install the qrcode npm module

npm install qrcode

Now that you have it installed, we can start coding!

Step 2: Generating QR codes on your Web Page

The first thing we’re going to do is import the qrcode module that we just installed on the top of our page

import QRCode from 'qrcode'

Next we’ll put together some basic scaffolding for a React class component

import QRCode from 'qrcode'
export class Qrcode extends Component {
render() {
return (
<div>
     <canvas id="canvas" align="center" />
</div>
)}}

Your React component should look something like the above. Notice the <canvas> tag inside our render, this will be important later on. Make sure to include it as this is where our QR code will be generated on our web page.

Next we will make a generateQr function where we will put our logic for generating a QR code

generateQR() {
let str = 'My first QR!'
QRCode.toCanvas(document.getElementById('canvas'), str, function(error) {
if (error) console.error(error)
//console.log('success!')
})
}

QRCode has a built in function toCanvas that takes in 3 parameters:

1. The canvas element, that we created in our render
2. A string, which will be the information stored in the QR code
3. a callback function for error and success handling

We invoke this function inside our generateQr function to create our QR code with the value ‘My first QR’.

If you’ve made it this far, congrats! we’re 90% of the way to generating your first QR code. Now all we have to do is hook it up to a button

render() {
return (
<div align="center">
     <canvas id="canvas" />
     <button onClick={this.generateQr}>
          Generate QR!
     </button>
</div>
)}

This button calls our generateQr function when its clicked and populates our canvas tag with our newly created QR code.

Try it out! you should get something similar to my React websites implementation pictured below.

Example QR code generated and displayed using React

Its a QR code! … but how do we know it stores our data? Well to test that all you need is a QR reader and lucky for you most smartphone automatically integrate a QR feature (check online if yours has this feature). Just hold up your camera to the QR code and you should see a little drop down notification with our message!

Example of scanned QR code with our sample text “My first QR!”

Your finished code should look something like the below

import QRCode from 'qrcode'
export class Qrcode extends Component {
generateQR() {
     let str = 'My first QR!'
     QRCode.toCanvas(document.getElementById('canvas'), str,                  function(error) {
          if (error) console.error(error)
          //console.log('success!')
     })
}
render() {
return (
<div align="center">
     <canvas id="canvas" />
     <button onClick={this.generateQr}>
          Generate QR!
     </button>
</div>
)}}

Step 3: Now What?

Cool, we’ve got a QR code… but what can we do with that?

Great question! theres a lot we can do

1. Store a website url, this way when people scan your QR code they can click that dropdown notification to go to your website
2. Store stringified objects like access codes, coupon codes, Id cards, ect. That way only people with a matching code can be accepted when the QR code is scanned
3. Pretty much anything that you can stringify. Get creative and have fun with your new QR code skills!