This content originally appeared on DEV Community and was authored by Gayathri R
QR (Quick Response) codes are capable of storing lots of data, and users can easily access the information by scanning the QR code. In this blog, I'm going to explain to you how to create a QR Code Generator App using ReactJs.
Here's a preview:
Let's get started...
Create a new React Js project.
$ npx create-react-app qr-code-generator
$ cd qr-code-generator
$ npm start
Open the application into a VSCode editor. In that, expand the 'src' folder. Inside that you can see two files that is, 'App.css' and 'App.js'. Here App.js is the only default component of our app that contains all the logic. We will be using a free opensource (no auth requires) API called ‘create-qr-code’ to fetch the required QR code image.
Now write down the following code in the App.js file.
import { useEffect, useState } from 'react';
import {useRef} from 'react';
import './App.css';
function App() {
const inputRef = useRef(null);
const [qrUrl, setWord] = useState("");
const [qrImg, setQrCode] = useState("");
const [active, setQrCodeStatus] = useState("");
useEffect(() => {
setQrCode
(`http://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrUrl}`);
},);
function generateQR() {
let qrValue = inputRef.current.value.trim();
if(!qrValue) return;
setWord(qrValue);
setQrCodeStatus("active");
}
const inputChange = event => {
if(event.target.value === '') setQrCodeStatus('inActive');
};
return (
<div className={ `wrapper ${active} === 'active' ? "wrapper active" : "wrapper"` }>
<header>
<h1>QR Code Generator</h1>
<p>Paste a url or enter text to create QR code</p>
</header>
<div class="form">
<input ref={inputRef} onChange={inputChange} type="text" id="qr_code" name="qr_code" spellcheck="false" placeholder="Enter text or url" />
<button onClick={generateQR}>Generate QR Code</button>
</div>
<div class="qr-code">
<img src={qrImg} alt="qr-code" />
</div>
</div>
);
}
export default App;
Now, let’s edit the file named App.css to design our app.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
min-height: 100vh;
align-items: center;
background: #3498DB;
justify-content: center;
}
.wrapper{
height: 265px;
max-width: 410px;
background: #fff;
border-radius: 7px;
padding: 20px 25px 0;
transition: height 0.2s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
height: 530px;
}
header h1{
font-size: 21px;
font-weight: 500;
}
header p{
margin-top: 5px;
color: #575757;
font-size: 16px;
}
.wrapper .form{
margin: 20px 0 25px;
}
.form :where(input, button){
width: 100%;
height: 55px;
border: none;
outline: none;
border-radius: 5px;
transition: 0.1s ease;
}
.form input{
font-size: 18px;
padding: 0 17px;
border: 1px solid #999;
}
.form input:focus{
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
color: #999;
}
.form button{
color: #fff;
cursor: pointer;
margin-top: 20px;
font-size: 17px;
background: #3498DB;
}
.qr-code{
opacity: 0;
display: flex;
padding: 33px 0;
border-radius: 5px;
align-items: center;
pointer-events: none;
justify-content: center;
border: 1px solid #ccc;
}
.wrapper.active .qr-code{
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
width: 170px;
}
@media (max-width: 430px){
.wrapper{
height: 255px;
padding: 16px 20px;
}
.wrapper.active{
height: 510px;
}
header p{
color: #696969;
}
.form :where(input, button){
height: 52px;
}
.qr-code img{
width: 160px;
}
}
Step to Run Application: Run the application using the following command from the root directory of the project:
$ npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Don’t forget to star the repo on GitHub. Stars keep me motivated and are highly appreciated.
Code reviews welcome. Let me know if I can do something better.
This content originally appeared on DEV Community and was authored by Gayathri R
Gayathri R | Sciencx (2022-07-10T13:49:17+00:00) ReactJs QR Code Generator. Retrieved from https://www.scien.cx/2022/07/10/reactjs-qr-code-generator/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.