Up next in 10
React.js Tutorial to Display Country Flag Emoji & Icons in Browser Using tiny- flag-react 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
0:03
in this video I will talk about uh how
0:05
to show uh countryes Flags inside your
0:08
reactj application so if you're building
0:10
any sort of application which relates to
0:12
showing the flags of countries you can
0:15
use this module which is very easy to
0:17
use configure I will show you step by
0:19
step it's in react chair specific you
0:22
can see all these countries us India
0:25
France Japan Australia Brazil so it
0:28
supports all the countries which are
0:29
there in the world and uh the the module
0:33
name is if you just go to npmjs.com and
0:37
you just need to search for this module
0:40
country Flag
0:43
icons so it actually provides you with
0:46
the flags of each and every country it
0:48
has very popular modules 736 th000
0:51
weekly downloads this is actually the
0:54
command here npmi country Flag icons
0:57
I've already installed it
1:00
so I will show you step by step how to
1:02
use this module so first of all just
1:05
make a simple functional
1:08
component and after that we need to now
1:11
include the module by the import
1:13
statement so import and here it will be
1:15
importing the mod Flags so you need to
1:19
put the country shortcut names Us in
1:24
India F FR JP Au for Australia BR for
1:28
Brazil so it it will be coming from
1:30
country Flag icons SL react SL 3x2 it's
1:37
actually the size of the
1:39
icons so we are importing it from there
1:42
so these are the shortcuts here us India
1:44
France Japan Australia Brazil so one by
1:48
one we will display the flags for doing
1:50
this we need to make the array here
1:53
which contains array of objects each
1:56
object will contain two properties first
1:58
is a component and the second one is the
2:01
title of the country so it will be
2:03
United States so in this way we will
2:07
repeat this for each and every country
2:09
so you just need to paste it so you can
2:12
even include more countries if you want
2:14
to show more Flags so we have two
2:16
properties right here in this
2:19
way component is us sorry directly using
2:25
it so after declaring this now in the
2:28
jsx right here
2:31
we now need to have a
2:37
diff so basically you'll be giving a
2:40
style parameter to it showing a display
2:43
as flex and uh you'll be having a gap of
2:46
20 pixel in between each flex and we
2:50
Flex
2:52
wrap to wrap and inside this we will
2:57
display the flax so we Loop through this
3:00
flax array we use the map
3:02
operator and inside this it will contain
3:05
these two properties component and
3:10
title and inside this we will show in a
3:13
diff structure
3:16
and it will basically style it so that
3:19
it looks good so we'll be giving a style
3:22
custom Styles so first of all width will
3:24
be around 100 pixel of each flag height
3:27
will be automatically be calculated
3:30
border I will give it here one pixel
3:33
solid little bit gray color and then I
3:36
will give some border radius as well so
3:39
it will be around five pixel so in this
3:42
div track we will display the flags so
3:44
for each flag we have this component
3:46
right here we are rendering it and this
3:49
component takes uh the title the title
3:52
is also we are getting it in this
3:55
property and just be giving a style to
3:58
it a width of of 100% and height of
4:04
Auto that's all so it takes two
4:06
properties title in the style and if you
4:09
refresh now you will see the flags are
4:12
appearing you can change you can add
4:15
more Flags let's suppose I also want one
4:18
more flag let me put here NZ which is
4:22
for New Zealand and I will put
4:41
so in this way you can add the countries
4:44
you'll
4:49
see so you can show it very
4:52
easily so this was a tutorial guys on
4:55
how to show countries flags icons inside
4:58
your react appli if you can use it thank
5:01
you very much for watching this video
5:03
and do check out my website as well free
5:05
mediat tools.com which contains
5:07
thousands of free tools regarding audio
5:09
video and image and I will be seeing you
5:13
guys in the next video