Up next in 10
React.js Tutorial to Create Custom Colorful QR Codes with react-qrcode-logo Library
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so I
0:02
will show you in this video how to
0:04
generate custom QR codes with custom
0:07
colors uh from Rotex you will see that
0:10
we also can provide a logo as well so
0:13
I'll show you a package which does this
0:15
process in react CH so we have this C
0:18
you can also save it as a image as a PNG
0:21
image so your custom QR code has been
0:25
exported to image as well so the package
0:28
which we are using is so just go to
0:31
npmjs.com and just search for this
0:34
package
0:36
react and I think react QR code
0:41
logo so just search for this
0:47
package so I think this is actually the
0:50
package it's a typical react CH
0:52
component to generate a customizable QR
0:54
code almost it has 49,000 weekly
0:57
download 64,000 sorry and this is
1:00
actually the command Ive already
1:02
installed it so now I'll be showing you
1:05
this example so just make a simple
1:07
functional
1:10
component so I will just show you from
1:13
scratch so I type it step by step so
1:18
first of all you do need to import this
1:21
so after making the functional component
1:24
just use the import statement to
1:27
actually import this so we have this me
1:29
method available which is QR code which
1:32
will be coming from react QR code logo
1:36
so now inside to display this so you
1:39
simply use this component inside the div
1:43
you will give it a
1:44
style you'll align this into Center
1:47
position and after this we will be
1:51
having a simple H1 heading which will
1:54
custom QR
1:57
code with logo and then we'll be using
2:00
this component which is QR code and this
2:03
takes some options if you don't pass
2:05
some options you will see this output a
2:08
simple QR code so it now has some
2:12
options to pass here you can specify the
2:14
value of this QR code so I will just say
2:18
it should redirect the user to
2:20
google.com you can even provide text
2:22
phone number anything and then you can
2:25
control the sizing as well if I provide
2:28
90 inside integer value then the size
2:31
will be like
2:33
this uh you can provide higher value 500
2:37
so it will be
2:39
larger so here you can control the
2:41
sizing and then we have the color here
2:44
foreground color you can control
2:47
it so I just need this
2:51
color and then you can control the
2:53
background
2:55
color I can control let's suppose I give
2:58
this red color
3:00
typically the background color should be
3:03
white so I will just give it a white
3:06
color and the foreground color will
3:13
be the black color so but you can
3:17
customize accordingly whatever you need
3:20
to you can change it the combination
3:23
like this so it totally depends upon you
3:26
and then it also takes an option for
3:28
specifying the logo if you do have a
3:30
logo of your company you can provide
3:32
your own logo as
3:35
well so I think you can provide it from
3:39
internet as well if you have the logo
3:43
URL so I will
3:45
just you can even provide your own logo
3:48
so you just need to specify the address
3:50
here and it will put this logo inside
3:53
your qyr code you can specify the height
3:56
of the
3:57
logo and the opacity of the logo as
4:03
well and remove QR code Behind logo
4:07
there is also this option as
4:11
well logo padding you can specify 10
4:31
so we have all these properties right
4:33
here I color you can control QR stylist
4:37
dots
4:39
so it will look something like if you
4:42
want to change it to dots so in this
4:46
way so default will be the square
4:49
circles you can even control this as
4:51
well so we put this logo right here if
4:54
you see the logo is appearing right here
4:57
so in this way uh
5:01
and then you can even just put some
5:03
custom Styles as well by providing the
5:05
style property just shifting it from the
5:08
margin top 20 pixel this is actually the
5:12
overall package guys which supports all
5:14
the options available and lastly you can
5:16
save this QR code as a PNG image as
5:19
well so this is actually the package so
5:23
thank you very much for watching this
5:25
video and do check out my website as
5:27
well free mediat tools.
5:30
which contains thousands of tools
5:32
regarding audio video and image and I
5:35
will be seeing you in the next video
#Programming
#Other
#Other