videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
React.js Generate and Download QR Code as Image From Text Using qrcode-react & Html2Canvas
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/aefadea5debfbc0181b1f9cd3b2040ad
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you how to
0:05
generate a QR code from a raw text so we
0:10
have this input feed where you can write
0:12
the data and then it will generate this
0:14
QR code with live preview instantly so
0:18
we have this button out there uh as you
0:20
type right here you will see the QR code
0:23
will
0:24
change
0:26
and just written google.com so I just
0:30
click on download QR code you'll see the
0:33
QR code will be exported to a PNG
0:36
file and here you can see your image
0:40
file has been generated the QR
0:42
code and uh in this way you can generate
0:46
your QR code and we are using this
0:47
package QR code do- react so
0:51
specifically for react GS applications
0:53
we have this package so if you go to
0:56
npmjs.com just search for this package Q
1:00
R code D react it's react component for
1:03
generating the QR codes almost 2 million
1:07
weekly downloads are there this is the
1:09
command so just install this I've
1:12
already installed it so I will just show
1:14
you a very simple example and also for
1:17
converting to image we are also using
1:19
this package which is html2 canvas which
1:23
is actually a screenshot library for
1:25
taking screenshot inside your browser
1:28
and save it as a image file so also
1:31
install this package as
1:33
well so I will just make a simple
1:36
functional component and then I will
1:38
import both the packages so you will
1:41
import the HTML 2
1:43
canvas from this package HTML to
1:50
Canvas and then we also need to import
1:53
this package as well which is QR
1:56
code canvas coming from this
2:00
library and now we just need to in the
2:03
base component we just need to declare
2:06
some State variables for keeping track
2:09
the text what text user write we using
2:12
the UST State hook initial value will be
2:16
react CHS you can give any
2:19
value I'm just giving this URL and then
2:23
for attaching the QR code reference we
2:26
will use this user F hook in initial
2:30
value will be
2:32
null so these two variables we have
2:35
declared and now we will come to the jsx
2:39
part we will have a simple
2:40
form where we allow the user to Simply
2:43
submit the
2:45
text we give it a padding of 20 pixel
2:48
and text align to Center so just
2:51
aligning everything in the center
2:53
position and here we'll be having this
2:56
reference attached which is QR code
3:03
we are attaching this reference if you
3:04
see we are declared this variable and we
3:07
are simply attaching
3:09
it it's kind of a ID and then we'll
3:12
giving
3:14
a styling here margin bottom 20 pixel
3:19
and here we are embedding our component
3:21
which is QR code canvas and it takes two
3:24
arguments first is actually the value so
3:27
value will be actually the text that the
3:29
user WR right and the size of the QR
3:32
code so I will just
3:34
256 so these two values it
3:38
takes and if you refresh your
3:40
application what you will see the QR
3:43
code will be
3:45
displayed and now I just need a simple
3:47
input field so that I the user can write
3:51
the text dynamically and the QR code
3:54
will change dependent upon that so we
3:57
have just input field right here so what
4:00
I will do I will just add this input
4:03
field input type will be of
4:06
text and the value will be I will just
4:09
find it to the text and we'll also be
4:12
finding an on change so when the user
4:14
write something right here using the
4:17
hook function and whatever
4:20
is typed in the input field we will just
4:23
executing this hook function so we'll be
4:26
making this calling this and then uh
4:30
we'll give it a placeholder as well
4:32
which is enter text for QR code and
4:36
actually some
4:38
styling for this input field so margin
4:42
top 20 pixel and the padding
4:45
of 10 pixel so we actually have this
4:49
input field and as you type here you
4:52
will see the QR code will
4:57
change so basically what is happening
5:00
when we are actually writing the text
5:02
this is
5:03
executing so the text is changing and
5:07
based upon the text we are changing the
5:09
QR code as well so in this way and now
5:12
we just need a simple download button so
5:14
that we can download this QR code as a
5:16
image file so we have this button we
5:19
will say
5:21
download QR code AS image so we will
5:27
just attach an onclick listener to this
5:29
button so when we click this button we
5:32
will execute this function handle
5:34
download and we'll also be giving some
5:36
styling to this button which is margin
5:38
top 20 pixel and a padding
5:43
of uh around 10 pixel 20
5:48
pixel and a phone size which is around
5:52
about 16 pixels so now we just need to
5:55
Define this function so which will be
5:57
executed once you hit the button so
6:00
handle
6:01
download Arrow function and inside this
6:05
function first of all we need to check
6:07
if the QR code has present is or not so
6:11
that's why we given this use reference
6:14
right here to this QR code like here if
6:17
you see this is the reason precisely the
6:20
reason because here we are checking that
6:22
if the QR code is present or not so if
6:25
the QR code is present then we need to
6:27
take the screenshot using this package
6:29
that we imported html2 canvas and we'll
6:32
take the screenshot and pass the
6:35
reference here of the QR code and then
6:39
this canvas will be returned to us and
6:41
now we can simply download this as a
6:44
image file so for downloading it we'll
6:47
be creating an element of anchor
6:50
tab so link. HF so we converting this to
6:54
base 64 code by using this function
6:56
canvas to data URL so it will convert
6:59
this into a
7:01
PNG and we will simply download this and
7:04
give it a file name QR
7:07
code.png and then I will click it very
7:10
simple so if you now execute now click
7:14
on this button you will see it will
7:16
download the QR code is a PNG image
7:20
file if I change the dynamically if I
7:24
change it to any text as well this is
7:27
text you will see you can provide phone
7:30
number text URL
7:33
anything so in this way guys you can
7:35
make this awesome application QR code
7:37
generator in react Chas thank you very
7:40
much for watching this video please hit
7:42
that like button subscribe the channel
7:45
and also check out my website as well
7:47
free mediat tools.com which contains
7:50
thousands of tools regarding audio video
7:52
and MH and I will be seeing you in the
7:55
next video
#Other