qrcode.react usage

#react #qrcode #programming #productivity

“Talk is cheap. Show me the code.”
– Linus Torvalds

Recently I have been dabbling back in React after being in Angular world for the past 2 years. Long story short is I wanted a QR code that when scanned will go to my LinkedIn page.

After looking around for a nice short and sweet approach to this ( because why invent the wheel.. obviously), I stumbled on qrcode.react. Super simple set up and usage.

Assuming you have a standard react setup already, i'll skip to the good part.

Open up the terminal and navigate to your react project and run

npm i qrcode.react

BAM all good and installed.

For this example, you'll add

import QRCode from 'qrcode.react';

to your app.js

then you'll add:

  return (
    <div className="App">
      <h1>QR Code</h1>
      <br />
      <QRCode value="www.google.com" size={290} />
    </div>
  );

To actually use utilize the QR Code.

Your entire app.js file should look like this:

import React from "react";
import QRCode from "qrcode.react";

export default function App() {


  return (
    <div className="App">
      <h1>QR Code</h1>
      <br />
      <QRCode value="www.google.com" size={290}  />
    </div>
  );
}

On the screen you should see the following:

AND look at that :) You can go a big deeper here if you want to with a download button to download a png/svg of your qr code or an input field to let the user set the link or value that the qr code would have. Probably a ton of other things you can do to make it even better!

Initial link that are helpful:
https://www.npmjs.com/package/qrcode.react

My codesandbox repo link:
https://codesandbox.io/s/qr-code-personal-8bdltl