Up next in 10
Build a React.js Phone Number Input with Country Code and Flag Using react-phone-input 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:02
in this video I will show you a react
0:04
CHS package which is useful for
0:06
displaying this input field for
0:09
receiving uh phone
0:11
numbers so with you can see that this is
0:13
actually the field that you will be
0:16
receiving
0:17
so we have this number input field uh
0:20
with international country code so
0:22
you'll see the flags will also be
0:24
displaying of each country and here from
0:27
the select field you can select any
0:30
country number and you can input the
0:33
user may enter any number and they can
0:37
select the country here you'll see that
0:39
so this is actually the select component
0:42
specifically designed for reactjs
0:44
application I will show you in this
0:45
video there is a certain package so
0:48
whenever you write the number it will be
0:50
showing right
0:52
here so the name of the package is uh
0:56
react phone input 2 so if you just go to
1:00
npmjs.com just search for this
1:03
package
1:04
just search here react Das phone-
1:10
input -2 so this is actually the
1:16
package so it is almost got 360,000
1:19
weekly downloads it's a popular package
1:22
and this is actually the
1:24
command so I've already installed it so
1:26
I will just show you a very basic
1:28
example so
1:30
so now to get started just make a very
1:32
simple functional component and uh for
1:36
including this component we just need to
1:38
write the import statement and Import
1:41
phone input and it will be coming from
1:43
this package react phone input
1:46
-2 and also we do need to import the CSS
1:49
file of this package as well for just
1:52
designing purpose so it has it built-in
1:54
CSS file as well so react phone input -2
1:58
and inside the Li folder we have the
2:01
style. CSS file so we are just including
2:04
this file as well you will see that
2:06
using the import
2:07
statement uh now to display that input
2:11
field first of all we need to declare
2:13
some two State variables first of all
2:16
for keeping track of which phone number
2:18
the user will write so we will have a
2:21
one variable for this so we'll be using
2:23
the UST State hook of react chairs
2:25
initial value will be nothing and
2:28
secondly we'll be also be showing the
2:30
phone number full phone number alongside
2:32
with the international code as well so
2:35
for that we will have a simple variable
2:38
again it we'll be using the UST State
2:41
hook so these two variables we have
2:43
declared and now to actually show that
2:47
component just go to your jsx and right
2:51
here uh inside the parent div I will
2:53
just give it a simple
2:56
padding of 20 pixel and ins inside this
3:01
we will render the this
3:04
component so the name is phone input and
3:08
it actually takes some options a
3:10
properties you can pass first property
3:12
is the country country code so two two
3:16
digigit country code that you need to
3:17
pass to this component so us basically
3:21
is US United States in in for India so
3:25
depending upon your country you need to
3:26
pass the two uh digit letter uh country
3:30
code secondly the actual phone number
3:32
and you'll be binding
3:34
this phone variable that we have
3:36
declared
3:39
earlier so if you just refresh your
3:41
application and just go you will see
3:43
this input field appearing and it's a
3:46
redimed input field where the user can
3:48
only be writing numbers you can't write
3:50
integers right here so the user can only
3:53
write number and as you write the number
3:56
uh it will be converted to the
3:58
appropriate format
4:00
and you will also see this uh
4:03
current this flag appearing as well of a
4:06
particular country so all these
4:08
International codes are specifically
4:10
designed for each countries that you
4:11
have can the user may select whichever
4:14
country of your choice and that
4:16
international code will be applied to
4:19
the number automatically so in this way
4:22
the user can select from this drop down
4:25
so it is red available inside this
4:28
component
4:29
so now the thing is that if you want to
4:33
capture the number that the user has
4:35
entered we can simply bind an onchange
4:37
event handler so this function will
4:39
automatically execute whenever the user
4:43
has finished typing the number so inside
4:46
this function we will execute this hook
4:48
function so whatever the value is
4:50
entered by the user inside this input
4:52
field we will capture this and store
4:54
this inside this uh function and you'll
4:58
be storing it inside this phone
5:03
variable so similarly we it also have a
5:07
on blur event handler as well so
5:10
whenever you lost the focus from the
5:12
input field this on blur function will
5:15
execute and here you'll be storing this
5:18
actual phone number which the user has
5:20
entered so inside using this function
5:23
set display phone so I will just display
5:26
this number at at below this input field
5:30
so whatever the number has entered by
5:32
the user so we can simply display
5:35
this simply inside this paragraph tag
5:39
just telling the user that you have
5:40
entered this
5:43
number so very simply we are displaying
5:46
it in the paragraph tag simply this
5:48
variable display phone so now if you
5:51
refresh the page if you write any
5:54
number and you will see selected phone
5:56
number which will appear alongside with
5:58
the country code as well so in this way
6:02
you can write any number and it's very
6:05
much easy specifically if you're
6:07
designing an application which involves
6:09
taking the user input their phone number
6:11
then it's a very good component
6:13
specifically designed for react CH
6:16
application you can try this and install
6:18
it I've shown you complete step bystep
6:22
instruction and uh thank you very much
6:24
for watching this video and do check out
6:26
my website as well free mediat tools.com
6:29
which contains thousands of tools
6:32
regarding audio video and
6:34
image and I will be seeing you in the
6:37
next video
#Programming
#Software
#Web Services