How to create a Countdown component using React & MomentJS

Florin Pop
May 16 · 4 min read

Recently I had to create a Countdown for one of my other projects, and I thought that it could also make a good tutorial. So in this post we’re going to create this component using React and a little bit of SVG. 😄

You can find the final result in this Codepen example:

First we will create the countdown functionality and then we will look into how to create the animated arc using SVG with some fancy functions. 😉

Creating the Countdown functionality

For this we’re going to use MomentJS library which will help us parse, validate, manipulate, and display dates and times.

Basically what we’re going to need is to have 2 dates:

  • the current date or now
  • the final date or then

When we have these 2 dates, we can subtract now from then using moment and we'll get the remaining time (or the countdown value).

For the then date, we'll need to pass 2 strings:

  • one, the timeTillDate string containing the final date until which we want to count (e.g: 05 26 2019, 6:00 am)
  • two, the timeFormat string that is used by moment in order to validate the time format (in our example would be: MM DD YYYY, h:mm a)

You can find out more about parsing strings and formatting them in the documentation.

Let’s see how this looks in code:

Note: the timeTillDate, timeFormat values will be provided inside the React component. For now we're using them as examples.

From the countdown object we can get all the values that we want to display in our component - days, hours, minutes and seconds left until we reach the then time.

Later we’ll add this code in a JS interval that would be called every second, but before that let's set up the react component for it.

The Countdown Component

For this we’re going to create a class based component, as we need access to the state of the component because we'll save these 4 values (days, hours, minutes, seconds) in it. By default these values are undefined.

Next, let’s create the interval that runs every second and saves the values in the state of the component. We'll do this interval inside the componentDidMount lifecycle method. We are going to clear the interval in the componentWillUnmount lifecycle method, as we don't want to keep it running after the component is removed from the DOM.

The CSS

We have the countdown functionality all up and running now, so let’s style it a little bit:

Nothing fancy in the CSS; we’re using flexbox to position the items within the wrapper.

Lastly, let’s create the SVG arc that will be surrounding each item in our countdown.

The SVGCircle Component

Before we do that, there are a couple of functions that we need in order to create the customizable SVG arc. I found these on StackOverflow. For more information you should go there and read the detailed explanation of the functions.

Basically the above function calculates how the arc should be drawn by providing a set of values as: the start and ending points, the radius and the angles.

Back to our React Component: we’re going to create the svg and we'll have a path tag within it which will draw the arc (the d prop) by giving it a radius property. The other 4 values within the describeArc function are fixed, as we don't want to modify it and we are customizing it to look good for our example.

And we also need a little bit of CSS to position it inside the .countdown-item (See where this component goes in the final result section):

Before adding this component inside the Countdown component, we need to convert the values that we have (days, hours, minutes and seconds) to their corresponding radius values.

For this we’ll need another simple function that will map a number within a range (in our case the date values) to another range of numbers (in our case, the radius). This function is also from StackOverflow:

The final result

Finally, let’s add the new SVGCircle component inside each of the .countdown-items and put everything together:

All you have to do now to use the Countdown component is to pass it the two props (timeTillDate and timeFormat) and you're golden 😉:

Conclusion

It was a fun little project with React, wasn’t it? 😄

When I built this I learned a little bit more about how to work with the momentjs library and also with svgs to draw an arc.

Let me know if you have any questions regarding this tutorial.

Happy Coding! 😇


Originally posted on www.florin-pop.com

Florin Pop

Written by

JavaScript enthusiast 🙌, Front-end developer 💻 & Blogger at https://florin-pop.com/blog/

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade