React QRCode Generator Tutorial

In this tutorial, we will learn how to create a simple QR Code generator using the react-qr-code npm package. Before we begin, we'd need to first clone the repository with the initial boilerplate code. Then you are going to install the packages.

git clone https://github.com/rbarbosa51/react-qrcode-generator-tutorial.git

cd react-qrcode-generator-tutorial
npm install        

Once you finish the installation, open it with your favorite code editor. Take a minute to review the code. It is a simple TypeScript-React project, made with Vite. It has been preconfigured with Tailwind CSS for styling. run the development server and you should see the following

Install the "react-qr-code" package

npm install react-qr-code        

Go to the "App.tsx" file, you are going to import the library and the useState hook.

import QRCode from "react-qr-code"
import { useState } from "react"        

We are now going to add a state. The state will hold the value of the input element. This input element will be passed to the <QRCode /> component. Write the following:

...
function App() {
  const [qrText, setQrText] = useState<string | null>(null);

...        

Now you are going to make some modifications to the code. You are going to wrap the Nothing box as seen below.

...
{qrText ? (
  <QRCode value={qrText} />
) : (
  // This was the original code
  <div className="flex aspect-square w-64 items-center justify-center border-2 border-solid border-purple-500">
   <div>Nothing</div>
  </div>
)}
...        

Now we are going to create a function to handle input changes to the input element. This function will change the state, based on the input.

const handleChange = (e: React.BaseSyntheticEvent) => {
  setQrText(e.target.value);
};        

Then modify the input tag to add an onChange attribute that takes the handleChange function we just created. It should look like the following:

<input
   className="rounded-md px-2 outline outline-1 focus:outline-none"
   type="text"
   name="qrValue"
   id="qrValue"
   onChange={handleChange}
 />        

Now run the development server, and type anything into the input. You should now see the QR code

The finished code should look like:

import QRCode from "react-qr-code";
import { useState } from "react";

function App() {
  const [qrText, setQrText] = useState<string | null>(null);
  const handleChange = (e: React.BaseSyntheticEvent) => {
    setQrText(e.target.value);
  };
  return (
    <div className="min-h-screen bg-gradient-to-b from-lime-100 to-purple-300 text-center text-purple-500">
      <h1 className="text-6xl">QR Code</h1>
      <div className="mt-16 flex flex-col items-center justify-center gap-4">
      {qrText ? (
          <QRCode value={qrText} />
        ) : (
          // This was the original code
          <div className="flex aspect-square w-64 items-center justify-center border-2 border-solid border-purple-500">
            <div className="">Nothing</div>
          </div>
        )}
        
        <label htmlFor="qrValue">Write a text to convert it to QR code</label>
        <input
          className="rounded-md px-2 outline outline-1 focus:outline-none"
          type="text"
          name="qrValue"
          id="qrValue"
          onChange={handleChange}
        />
      </div>
    </div>
  )
}
export default App        

If you get stuck, feel free to clone the finished code

git clone https://github.com/rbarbosa51/react-qrcode-generator-tutorial.git -b Finished        

I sincerely hope that you enjoyed this tutorial. I want to hear from you.

Are you looking for a web developer to join your team? I am looking for a new team to belong to; so feel free to contact me.

Please view my Portfolio:

https://rafael-barbosa.com