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
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
- the final date or
When we have these 2 dates, we can subtract
moment and we'll get the remaining time (or the
then date, we'll need to pass 2 strings:
- one, the
timeTillDatestring containing the final date until which we want to count (e.g: 05 26 2019, 6:00 am)
- two, the
timeFormatstring that is used by
momentin 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:
timeFormat values will be provided inside the React component. For now we're using them as examples.
countdown object we can get all the values that we want to display in our component -
seconds left until we reach the
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 (
seconds) in it. By default these values are
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.
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 (
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 (
timeFormat) and you're golden 😉:
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