Up next in 10
Build a React.js react-phone-input-international Example to Build Phone Picker Input With Flag 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 show you yet
0:03
another phone picker uh package which
0:07
allows you to pick your phone number
0:09
using this nice little input field where
0:11
you can search for a specific country
0:14
and that country code will automatically
0:16
be applied you can even search for
0:18
specific regions localities as well so
0:21
in the inside this phone picker and the
0:24
user can only show a certain number of
0:25
countries certain number of regions as
0:28
well so all sort of customer iation you
0:30
can perform inside this react CHS
0:33
specific phone
0:35
picker so there is also a search field
0:37
as well so you can search it so the
0:40
actual module name is if you go to
0:43
npmjs.com and just search for this
0:46
package which is react
0:49
phone input
0:52
International this is actually the
0:54
package
1:01
and it's almost got it's a fely new
1:04
package 197 downloads and this is
1:06
actually the command so I've already
1:09
installed this package so now to get
1:11
started I will just show you a very
1:13
basic example and just make a simple
1:16
functional component and then we need to
1:18
import this package by using the import
1:20
statement which is phone
1:25
input and it will be coming from this
1:27
package so it's almost 56 k
1:30
kilobytes and we do need to also import
1:33
its CSS files as well for styling so
1:36
react
1:38
phone
1:41
input International and it contains the
1:44
style. CSS file which is just 43
1:48
kilobytes so after including it I will
1:51
just create a simple State
1:53
variable for keeping track of whichever
1:56
phone number the user will write and for
1:59
this I will just use UST State hook
2:02
initial value will be nothing and now we
2:04
come to the jsx I will simply align this
2:08
in the center position so I will just
2:10
give some custom styles to it display I
2:13
will change to
2:16
flex justify content to be Center and
2:20
align items to be Center so I'm just
2:23
vertically and horizontally C uh
2:26
centering the content I will just give a
2:28
height of 100 ver Port text align to
2:34
Center and inside this uh we actually
2:37
show the phone picker inside this div
2:41
just give it a width of 300
2:44
pixel and then we use this component
2:47
that we imported phone input and
2:49
directly embed this phone input and it
2:52
actually takes some options parameters
2:55
so the default country that you want to
2:57
show he takes an country option here you
3:00
will pass the twl digit country code so
3:03
us stands for United States so we are
3:06
simply passing it and whatever value you
3:08
need to bind it so we have declared this
3:11
phone
3:12
variable so we are binding this the
3:15
second
3:16
parameter so if you just search here now
3:19
if you see this will be showing default
3:23
country the flag plus the country code
3:26
is automatically selected now you can
3:28
click this and now this picker will
3:31
start and you can pick any country so
3:34
now it's suppose you also want the
3:36
search field as well there you can
3:37
toggle this option which is enable
3:40
search so what does it do it's a Boolean
3:42
parameter you put it to true now it
3:46
also include this search field where you
3:49
can uh search for a specific country so
3:52
I search for India so you will see
3:53
automatically the flag and country code
3:56
will be applied and now you will be able
3:58
to enter your phone number in this way
4:02
so this lets the user simply search for
4:05
the country and let's suppose if you
4:07
only want to include certain countries
4:10
you can toggle this option which is only
4:13
countries so here you can specify array
4:15
of countries that you want to show only
4:18
which is US Canada let's suppose
4:20
Australia which is India so you include
4:24
the twet digit country codes and we are
4:26
providing this array so now it only
4:29
shows the these four countries you will
4:32
see so in this way you can be specific
4:35
as
4:37
well so now if you only want to show
4:40
specific regions country area codes so
4:43
there's is an also an option right here
4:45
which is
4:46
enable area
4:49
codes and I will just put it to true and
4:52
I just found the area codes which are
4:54
residing
4:57
in US and Canada so I just provide this
5:01
like
5:02
this so let's and then we also need to
5:04
enable this property which is enable
5:06
area code
5:09
search area code stretch so if you are
5:12
building an application which are
5:14
specific to that
5:15
region specific to a country these
5:18
options will be very much helpful so now
5:21
the user will only see the countries
5:23
which are residing in this region so all
5:25
the country codes if you see and they
5:27
will be able easily identify whichever
5:30
country C and selected and then write
5:32
their phone
5:33
number and lastly whatever phone number
5:36
that they write we have this onchange
5:38
event handler this function executes
5:41
automatically when they write the phone
5:42
number we will execute this set
5:46
phone and just put it phone so here we
5:49
can also display the phone
5:55
number your phone number is and then we
5:58
can simply show the phone number that
6:01
they written alongside with the country
6:03
code so now let's suppose they
6:08
select the country and then they write
6:11
the phone
6:12
number you will see we are mapping it
6:15
and you can see alongside with the
6:17
country code and this is your phone
6:19
number 10 digigit phone number so in
6:21
this way you can integrate it very
6:23
easily inside react chairs this package
6:26
I shown you a complete example and you
6:29
can use this module very
6:31
easily so thank you very much for
6:33
watching this video and do check out my
6:35
website as well free mediat tools.com uh
6:39
which contains thousands of tools
6:41
regarding audio video and image and I
6:44
will be seeing you in the next video
#Software