Up next in 10
Build a React.js QRCode Generator From Text & Export to PNG Image Using qrcode-react in TailwindCSS
10 views
Jun 3, 2025
Get the full source code of application here: https://codingshiksha.com/react/build-a-react-js-qrcode-generator-from-text-export-to-png-image-using-qrcode-react-in-tailwindcss/ Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys uh welcome to this video
0:02
uh so in this video we'll be looking at
0:04
how to build this uh uh QR code
0:07
generator kind of a application inside
0:10
react CH and this is a single page
0:12
application uh I'm running it on Local
0:14
Host if you see this is the application
0:17
we'll be building and uh we have the
0:19
text area where the user will write as
0:22
you are writing you will see the QR code
0:24
will be updated with live preview you
0:26
can adjust all these properties you can
0:28
adjust the size of the QR code you can
0:31
adjust the background color as well you
0:34
can adjust the foreground color of the
0:36
QR code as well you can see that after
0:39
that we also have the download button so
0:42
you can download this QR code as a image
0:44
file so if you click the download button
0:46
you will see the PNG file will be
0:48
downloaded so it's a simple QR code
0:51
generator and we will be using this
0:53
package specifically built for react CHS
0:55
for generating QR codes just go to
0:58
npmjs.com Just search for this package
1:01
QR code D
1:02
react the command is simple simply
1:05
install this package it's almost called
1:07
to 1 million weekly downloads so all the
1:11
source code of this application is given
1:13
in the description of this video so now
1:15
let's get started so let me just build a
1:18
very basic react CH functional component
1:21
and for building this we are using
1:23
Tailwind CSS so I've already included
1:25
the CDN of tailent CSS so first of all I
1:28
will just include the package here using
1:30
the import statement
1:32
so QR code
1:35
canvas it will be coming from this
1:37
package which is QR code react so in
1:41
this way we use the import statement to
1:43
import this package and after that we
1:46
just need to declare some State
1:47
variables which will be required for
1:49
this application so first of all the
1:52
text that is used to generate the QR
1:54
code for this we will be using this U
1:58
State hook initial value will'll be
2:01
giving at let's
2:04
suppose can give any initial value then
2:07
we have the variable to control the size
2:10
of the QR code again we'll be using UST
2:13
State hook initial value will be
2:16
256 then we will be having BG color to
2:20
control the background color of the QR
2:24
code initial value here we will be
2:27
giving
2:30
white here and then we also have the
2:34
variable to control the foreground
2:55
color so this will be black color
3:06
so then we will also be having a
3:09
variable if you want to have margin as
3:12
well so for this we'll be having a
3:14
Boolean parameter initial value will be
3:16
true you can toggle the margin and then
3:19
we have QR code reference and QR code
3:21
key as well so these are all the
3:24
variables which are needed and
3:26
then we will come to the jsx
3:32
so right here we
3:35
will just give some tailin classes here
3:38
and after that you will have a simple H1
3:41
tag which will say QR code
3:45
generator and after that we'll be having
3:50
a Dev element inside this we
3:53
will actually having a label which will
3:56
say enter text or URL so enter the text
4:02
for your QR code and after that you'll
4:05
be having a simple input field where the
4:07
user will
4:09
enter the text which will be required
4:13
for generating the QR code so after this
4:18
label so basically having this input
4:21
type text field we attaching this value
4:24
here which we declared this is actually
4:26
the variable which we declared this is a
4:28
text we are attaching it and then we are
4:31
binding this onchange event handler so
4:33
whenever you change the text this
4:35
function will execute handle text change
4:38
then we have the placeholder and then we
4:40
attaching these Tailwind classes so just
4:42
we need to Define this function here
4:44
handle text change which will be the
4:46
JavaScript function so we will just
4:48
Define this function handle text change
4:51
e parameter will automatically get
4:53
passed so right here we will capture the
4:56
value which is entered by the user so
4:58
it'll be simply be updating it by using
5:02
the hook function set text e. Target do
5:06
value so if you refresh your application
5:09
you will actually see this
5:15
uh it is saying that us ref is not
5:18
defined sorry we haven't imported us ref
5:25
hook so if you now refresh your
5:27
application you will see this input
5:29
field
5:32
now similarly we need to declare some
5:34
more Fields right here for controlling
5:37
the background color foreground color as
5:39
well so just after this div
5:49
here we will have another one which will
5:53
be controlling the size of the QR code
5:57
so input type range minimum 128 maximum
6:01
512 we again attaching this on change
6:04
handle size
6:09
change
6:11
uh so this will be a simple slider HTML
6:15
slider which will control the size of
6:17
the QR code then we will
6:22
have two color
6:25
Pickers first of all for controlling the
6:29
background color and the foreground
6:31
color of the QR code so let me just
6:33
paste
6:38
it so input type color this is for
6:42
background color this is for QR code
6:44
color and you will
6:48
see so then we also need to have
6:53
a margin if you want to add margin to
6:57
your
7:00
QR code then you can have after
7:04
this a checkbox here so it will actually
7:08
say whether you want to include margin
7:11
or Not by default it will be
7:14
checked and uh lastly we will actually
7:18
display the QR code so right
7:22
here inside this div
7:31
we just add these QR code classes this
7:41
format so inside this we will actually
7:44
use this component here uh which is QR
7:47
code
7:49
canvas which we already imported and
7:52
this component will take all these
7:53
properties so first of all we need to
7:56
pass the ID property so you can give
7:59
anything here QR code let me give and
8:01
then the key property takes QR code key
8:06
and then actually the
8:07
value the actual text which will be used
8:10
to generate the QR code then the
8:13
size and then the BG color all these
8:18
properties that's why we declared the
8:20
variables early on so that we can
8:23
dynamically pass these
8:28
variables then we also
8:32
have the level property as well of the
8:35
QR code this will be
8:38
H then there is a property include
8:41
margin so it will be a Boolean parameter
8:44
whether true or
8:46
false and then we lastly is reference
8:57
property so you can see see we have
8:59
attached all the properties right right
9:02
here so we can close this
9:08
element so if you refresh now
9:18
uh so we just need to Define all these
9:21
uh functions 1 by
9:25
one so input
9:30
so first of
9:32
all for the size of this so right
9:38
here we will attach an onchange event
9:42
handler which will be handle
9:45
size change so we are attaching this to
9:49
the slider of the size of the QR code
9:53
then same thing we will do for the
9:54
background color as
9:56
well so we'll be attaching this on chain
10:00
this and for the foreground color as
10:02
well so this will be
10:06
handle foreground color change
10:12
so so in this
10:15
way then same thing we need to do this
10:20
for margin field as well so if the
10:23
checkbox is not ticked by the user then
10:26
we don't want to include the margin so
10:30
now we just need to Define all these
10:31
functions that we defined
10:34
similarly so right in the JavaScript
10:36
code right
10:52
here so all the source code will be
10:54
given in the description so let me
10:57
Define all these four functions
10:59
so when the size changes we actually set
11:03
the size here convert the string into
11:05
number and e. target. value same thing
11:08
for the BG color background color change
11:11
foreground color change and then the
11:17
margin so if you load the page for the
11:19
very first time then here we just need
11:21
to initialize this library for
11:24
initializing it we have a hook inside
11:27
react chair which is called as user
11:29
effect so this hook will execute as soon
11:33
as your application loads so right
11:35
inside this here we need to specify a
11:39
key and all the parameters text size BG
11:45
color foreground color and include
11:49
margin here we need to set the QR code
11:53
key so this will be a simple random
11:56
value and uh you can just set this key
12:00
to
12:05
be like this previous key + one so it's
12:10
just a key is a integer value so we are
12:12
setting this inside this use effect so
12:15
now if you reload this
12:20
application you will see as we are
12:22
changing the sliders
12:30
you can see the QR code has been
12:33
successfully generated
12:41
and so as we are changing the value here
12:43
you can see the QR code is automatically
12:46
generated and uh now we just need to add
12:48
a download button at the bottom side so
12:51
that we can download this QR code as a
12:53
PNG image so right in the
12:55
js6 at the bottom side we will add a
12:58
simple
13:08
button
13:15
so so this button here you can see we
13:18
binded this on click listener when you
13:20
click this button download QR code this
13:22
function will execute so now we just
13:25
need to Define this function so
13:31
download QR codes so right in this
13:33
function we will export this QR code as
13:36
a PNG image for exporting
13:40
this we will
13:42
actually use the canvas here we have
13:46
given this QR code and ID which is QR
13:52
code if you closely notice in the
13:55
previous step whenever we are rendering
13:57
this QR code we given this ID so we just
14:00
targeting this QR Code by its ID and
14:04
after that it becomes very much
14:06
easy so if the canvas element is there
14:09
then then we just need to use a function
14:13
which is Canvas 2 Data URL this is a
14:18
function which Returns the base 64
14:21
code of the canvas we converting it to
14:24
image/png
14:31
we'll be chaining this replace method
14:41
and loet stream this is a logic here
14:45
which will export the canvas to the
14:48
image now we just need to download this
14:51
as an attachment this is really easy we
14:54
actually construct the anchor tag and
14:57
you can see we are adding it to the body
15:00
dynamically this is a file name so if
15:02
you refresh your application now what
15:05
you will
15:09
see let me just make the background
15:11
color to
15:14
be
15:18
sorry let me change the background color
15:20
to be
15:33
so now you can see that uh you can
15:36
change the size
15:40
here click download and you will see
15:42
your QR code will be downloaded as an
15:45
image file so in this easy way guys we
15:48
have constructed the single page
15:49
application in react CH QR code
15:51
generator you can control all the
15:53
properties color size using these
15:55
sliders it typically works in the
15:58
browser
16:04
so using this package we used QR code D
16:07
react all the source code will be given
16:09
in the description of this video and
16:11
also check out my website free mediat
16:13
tools.com which contains thousands of
16:16
tools regarding audio video and image
#Programming