Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
In this article, we are going to make QR-Code generator in react. A QR-Code is a barcode which is readable by a machine. Nowadays, we all use QR-Codes for Wi-Fi, online transactions, at malls etc. it simply used frequently and makes life easier.
Since, QR-Code that much useful, let’s make our own QR-Code. In today’s project, we will create a generator for QR-Code. We will have an input field to add a link or URL, this URL can be anything like https://reactjsguru.com and a button to submit this URL and to generate the code for the given URL. We will make it a working QR-Code, if you scan the QR-Code it will redirect you to that link as well. So let’s move on to the project without wasting the time.
First, we need to import our required modules in App.js file, Of course we will add our React module but here we also need another module for qr-code generator. For this, we need to install the qrcode
module using npm install qrcode
a command in the console. Because of this module, we can generate the QR-Code as a string, and we can add this string in our <img> tag to get our QR-code as an image.
Here we have imported QR-Code
from qrcode
module, and also we have added our useState
hook from our React module. We need this hook because once we generate the QR-Code, we need the URL and QR-Code, so they won’t get erased.
import QRCode from 'qrcode'
import { useState } from 'react'
Now after, adding the modules, let’s move to the code, here we have added our main function name App. In which we are going to write our logic, simply, App is our component here. In this, we created two useState hooks, one for URL and Other one for QR. setUrl
and setQr
are updated values, which will set the updated valued to the url
and qr
. We have added current values for url
and qr
to '' (null string )
specified in the useState('')
. If you want to learn more about useState hook, you can see here
. And finally, we have exported this component, so that our index.js file can access content from this App.js component.
function App() {
const [url, setUrl] = useState('')
const [qr, setQr] = useState('')
}
export default App
Now after creating our states for QR and URL, we need to create the structure in which we will add input field, generate button, Qr-Code image and download button. In this, we have created a div with class name app, we have added one heading tag with QR Generato
r text.
Then we have added input field which have text type, place-holder with example of URL, and a value in which we have added useState of url
. This url
value will be empty because we have assign empty to this url
when we have defined it. Also, we have added onChange
a property, in which we have fetched the user input value using e.target.value
, this will give the value added by user. And we have set this value in the setUrl
hook, which will update the value of url
.
Then after we have added a button, in this we have added an onClick
event listener to perform some work when it gets clicked. In this listener, we have added a function which should be run if the button gets clicked. We will define this function later.
After that, we have added our image, in which we will add our generated QR-Code. We will generate the code in the GenerateQRCode
function. Also, we have added anchor tag in which have added download property, with image name. Here href
will helps up to target the image to be downloaded.
return (
<div className="app">
<h1>QR Generator</h1>
<input
type="text"
placeholder="e.g. https://google.com"
value={url}
onChange={e => setUrl(e.target.value)} />
<button onClick={GenerateQRCode}>Generate</button>
{qr && <>
<img src={qr} alt="qr-code"/>
<a href={qr} download="qrcode.png">Download</a>
</>}
{
console.log(qr)
}
</div>
)
Now let’s move to our main and final part to generate our code, Here we need the function named GenerateQRCode
which we have already added to the click event on generate button. In this function, we will use QRCode.toDataURL()
method, this method will make the QR-Code for the given URL. Here, we will add the current value of the useState hook as our URL. In the React, return()
will run first, so that url
will have the user input value in it.
Now, we will add some style here, to get some certain amount of width and some color variations. Then we have added an error message to show in the console if the url
is wrong.
const GenerateQRCode = () => {
QRCode.toDataURL(url, {
width: 800,
margin: 2,
color: {
dark: '#335383FF',
light: '#EEEEEEFF'
}
}, (err, url) => {
if (err) return console.error(err)
console.log(url)
setQr(url)
})
}
We have mainly focused on the React code, so we don’t get into the CSS part in deep. In CSS part, we just have added some basic styles to the app, which is purely depends on you to customize it. You can add below CSS in your project if you don’t wont to add much more things.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
text-align: center;
background-color: #1b2034;
color: #fff;
}
img {
display: block;
width: 480px;
height: 480px;
margin: 2rem auto;
}
.app {
padding: 2rem;
}
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
input {
appearance: none;
outline: none;
border: none;
background: #EEE;
width: 100%;
max-width: 320px;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
margin-right: 1rem;
}
button, a {
appearance: none;
outline: none;
border: none;
background: none;
cursor: pointer;
color: #2bcb4b;
font-size: 1.5rem;
text-decoration: none;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
App.js
import QRCode from 'qrcode'
import { useState } from 'react'
function App() {
const [url, setUrl] = useState('')
const [qr, setQr] = useState('')
const GenerateQRCode = () => {
QRCode.toDataURL(url, {
width: 800,
margin: 2,
color: {
dark: '#335383FF',
light: '#EEEEEEFF'
}
}, (err, url) => {
if (err) return console.error(err)
console.log(url)
setQr(url)
})
}
return (
<div className="app">
<h1>QR Generator</h1>
<input
type="text"
placeholder="e.g. https://google.com"
value={url}
onChange={e => setUrl(e.target.value)} />
<button onClick={GenerateQRCode}>Generate</button>
{qr && <>
<img src={qr} alt="qr-code"/>
<a href={qr} download="qrcode.png">Download</a>
</>}
{
console.log(qr)
}
</div>
)
}
export default App
index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
text-align: center;
background-color: #1b2034;
color: #fff;
}
img {
display: block;
width: 480px;
height: 480px;
margin: 2rem auto;
}
.app {
padding: 2rem;
}
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
input {
appearance: none;
outline: none;
border: none;
background: #EEE;
width: 100%;
max-width: 320px;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
margin-right: 1rem;
}
button, a {
appearance: none;
outline: none;
border: none;
background: none;
cursor: pointer;
color: #2bcb4b;
font-size: 1.5rem;
text-decoration: none;
}
Check out video reference here:
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in react […]
[…] How to Make QR-Code Generator in React […]
[…] How to Make QR-Code Generator in React […]