videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a React.js Project to Display Flag Image Icons of All Countries Using react-flag-kit in JSX
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
0:02
in this video I will introduce to a new
0:04
react CHS package which allows you to
0:07
actually render out the uh flags of the
0:11
countries so if you have an application
0:14
where you want to display the flags of
0:16
countries you can use this package and
0:18
you can search for this package uh if
0:20
you go to npmjs.com and just search for
0:23
this package which is
0:25
react flag kit this is actually the name
0:29
of this package and it actually contains
0:32
all the
0:33
flags you can control the size as well
0:36
this is actually the command here let me
0:39
just open my zoom it tool so that I can
0:42
zoom in on a particular element just
0:46
wait so this is actually the command
0:49
here uh you just need to install it I
0:51
have already installed it it almost got
0:53
30,000 weekly downloads so now to get
0:57
started we will just make a simple
0:58
functional component
1:00
and then I will just include this module
1:02
by the import statement and it contains
1:05
this flag
1:06
icon which will be coming from this
1:09
package which is react flag kit it's
1:12
almost 923 bytes it's very lightweight
1:15
package now to include the flags you
1:18
come to the jsx part and I will make
1:20
everything in the center position so
1:22
I'll just write some custom Styles
1:25
change the display property to flex and
1:28
flex Direction I will make it clock
1:32
column and justify content to be I'm
1:36
just vertically and horizontally C uh
1:39
centering the items so align items I
1:41
will make it Center so now inside this
1:45
we will display and also we will give it
1:48
a height as well of 100 vertical height
1:53
so inside this you will render your
1:54
flags so you basically use this
1:56
component flag icon and this component
1:59
takes two parameters here you need to
2:01
pass two parameters such as the code
2:03
country code two letter digit country
2:06
code so you will see all these choices
2:08
available in the drop down you can
2:09
select any country let me select us for
2:12
United State then we can even control
2:14
the size of the flag so I will say
2:17
50 and if you refresh now you will see
2:21
on your screen this flag will be
2:23
shown and let me change it to 120 it's a
2:28
little bit larger
2:33
and in the similar way you can copy
2:37
this and
2:40
change the country code so two letter
2:44
two letter digit code so India which is
2:48
in Australia which is au New Zealand
2:52
which is NZ and Japan is
2:54
JP and uh then we
2:58
have in
3:00
Indonesia can have any country of your
3:03
choice CF for Canada so you will see all
3:07
these flags will now show so in this way
3:10
you can pick any country and show their
3:12
Flags using this package it's a very
3:14
lightweight package and the quality of
3:16
the images you will also see it's quite
3:18
look good and uh in this way you can use
3:22
it so the configuration is quite simple
3:25
you require the package at the very top
3:27
using the import statement and then you
3:29
use this package pass the properties
3:31
here which is the country code and the
3:33
size of the flag and that's all so this
3:37
is actually the package thank you very
3:38
much for watching this video please hit
3:41
that like button subscribe the channel
3:43
and also check out my website as well uh
3:46
free mediat tools.com uh which contains
3:48
thousands of tools regarding audio video
3:51
and image and I will be seeing you in
3:53
the next video
#Development Tools
#Other