Up next in 10
Build a React.js Countdown Timer Clock Animation in JSX Using count-down-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:02
in this video I will show you how to
0:04
display this countdown clock inside your
0:07
react application so this countdown
0:10
clock guys is very much necessary inside
0:13
sales website so if you want to sell
0:15
something then you basically display
0:18
this countdown inside your website if
0:21
you have something special which is
0:23
going to happen then also in those cases
0:25
as well countdown clocks is very very
0:28
much important so now show you a package
0:31
which is specifically there for react CH
0:33
application which you can do it to show
0:36
this awesome looking countdown clocks so
0:39
there is this package if you go to
0:40
npmjs.com just search for that which is
0:44
countdown react essentially this is
0:47
actually the package I've already
0:49
installed it the command is very simple
0:52
you install this and it's almost got
0:56
444,000 444 weekly download very new
1:01
package and I am just hosting this very
1:06
simple example on code sandbox.com
1:10
so now to get started just you need to
1:14
first of all
1:17
make the functional component and I will
1:20
just make
1:24
it first of all I will import the react
1:30
then we import the package which is
1:34
countdown from uh countdown
1:38
react so essentially this is your
1:41
package we are importing
1:43
react and then we make this component
1:46
which is
1:49
countdown
1:52
renderer and it actually takes three
1:55
parameters the days hours minutes and
1:59
seconds
2:00
so from this we will make this countdown
2:06
clock so essentially this
2:12
component will have the basic things
2:16
which will be there we pass these four
2:19
things to this component the days hours
2:22
minutes seconds using these four things
2:24
inside this component we are displaying
2:27
these details very simply this is day
2:30
hours minutes and seconds it says
2:32
countown renderer and now we just need
2:35
to declare some more Styles which will
2:39
be there so I will give all the Styles
2:42
in the description of this video you can
2:44
copy this so we declared all these
2:47
styles of this
2:49
clock and now I make my main functional
2:53
component inside function and right here
2:58
we make make a variable here countdown
3:01
duration so here you will specify the
3:05
time period so the value will be in
3:08
millisecond so first of all you need to
3:11
provide a value in millisecond so we are
3:14
multiplying 24x 5 which translates to 5
3:18
days and then we are multiplying 60 by
3:21
60 + 4 which
3:25
is 2 5 days and 4 hours
3:30
and uh this much of seconds so this is
3:34
your
3:36
countdown time in
3:38
millisecond and whatever thing now we
3:41
need to display it we put it in the jsx
3:45
expression so very simply we use the
3:49
component to render out this simple
3:52
little
3:54
clock and lastly we export default app
3:57
to show it
4:02
so in this way if you see this is your
4:04
five days coming from 24 by 5 which is 5
4:10
days and this is your four 5 hours and
4:14
47 seconds so now this countdown clock
4:17
will
4:18
start so in this easy way you can
4:21
display this countdown
4:23
clock specifying any custom little prime
4:26
time period that you want to specify so
4:29
this was the package guys you can easily
4:31
install it and use it inside your react
4:33
CH application and thank you very much
4:36
guys for watching this video and do
4:38
check out my website as well free mediat
4:40
tools.com uh which contains thousands of
4:43
tools regarding audio video and MH and I
4:47
will be seeing you guys in the next
4:49
video