How to develop a QR code generator using React.js ??

Being a developer I am always in search of developing something interesting…The idea of creating a QR code generator was pretty old as I was going to work on a project and I did not have good development skills.

So let's skip the story and start developing…

What we will need ??

A. Create a react Project

npx create-react-app qr-code

B. Add QR code library

npm i qrcode.react

Check the Documentation of npm library here- https://www.npmjs.com/package/qrcode.react

C. Add Material UI [ to get through lots of Styling 🧐]

npm install @mui/material @emotion/react @emotion/styled

Done installing all libraries, Now let's start developing….

As we have created our react app we should remove all undesired files from the src folder and public folder (P.S. never remove index.html)

Create a component folder inside the src folder and create file Qr.jsx. This file will contain our code for the QR component. Qr component will return a container consisting of two sub-containers, one for taking input and the other containing QR code. We will use Material Box to build our containers.

<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
justifyContent: 'space-around',
alignItems: 'center',
bgcolor: '#e3f2fd',
p: 3,
width: '50%',
marginLeft: '25%',
height: '60vh',
overflow: 'hidden',
borderRadius: '7px',
boxShadow: 1,
fontWeight: 'bold',
}}>
<Box sx={{}}>
<form onSubmit={click} >
<TextField type="text" placeholder="Enter your text" name='link' value={link} onChange={(e) => setLink(e.target.value)} required />
<br></br>
<br />
<label> Background Color </label>
<input type="color" name="color" value={color} onChange={(e) => setColor(e.target.value)}></input>
<br></br>
<br />
<label> Foreground Color </label>
<input type="color" name="fgcolor" value={fgcolor} onChange={(e) => setFgColor(e.target.value)}></input>
<br></br>
<br></br>
<Button variant="contained" color="success" type='submit' > Generate QR </Button>
</form>
</Box>
<Box sx={{
right: { xs: 0, md: 'auto' },
}}>
<QRCodeCanvas id='canvas' value={qrCode} bgColor={color} fgColor={fgcolor} size={250} />
<br />
<br />
<Button variant="contained" color="success" type='submit' onClick={download}> Download QR </Button>
</Box>
</Box>

The QRCodeCanvas accepts many different properties but we will be using only a few like value, bgColor, and fgColor.

Now we need to handle our inputs and two buttons one for generating and the other for downloading QR code.

const [link, setLink] = useState('');
const [color, setColor] = useState('#ffffff');
const [fgcolor, setFgColor] = useState('#000000');
const [qrCode, setQrCode] = useState('JohnDoeSEARCh');
const click = (e) => {
e.preventDefault();
console.log('click')
console.log(link)
setQrCode(link)
}

For Download functionality

const download = (e) => {
e.preventDefault();
const canvas = document.getElementById('canvas')
const pngUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
let downloadLink = document.createElement("a");
downloadLink.href = pngUrl;
downloadLink.download = "QR.png";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
console.log(canvas)
}

Now import this component to App.js and build.

npm start

End Product

Github Repo

Preview

Keep building….