Advanced timer countdown React Component ( Days - Hours - Minutes - Seconds )

In this snippet, we'll create an advanced timer countdown React Component with some Javascript, CSS and HTML codes.

Follow the steps below:

Step 1, Create Timer.js component with the Jsx codes below:

import React, { Component } from "react";

class Timer extends Component {
  constructor(props) {
    super(props);
    this.countDownId = null;
    this.state = {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      expired: false
    };
  }

  componentDidMount() {
    this.countDownId = setInterval(this.timerInit, 1000);
  }

  componentWillUnmount() {
    if (this.countDownId) {
      clearInterval(this.countDownId);
    }
  }

  timerInit = () => {
    const { startDate } = this.props;
    console.log(startDate);
    const now = new Date().getTime();
    if (!startDate) {
      this.setState({ expired: true });
      return;
    }
    const countDownStartDate = new Date(startDate).getTime();
    const distance = countDownStartDate - now;
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // For countdown is finished
    if (distance < 0) {
      clearInterval(this.countDownId);
      this.setState({
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
        expired: true
      });
      return;
    }
    this.setState({ days, hours, minutes, seconds, expired: false });
  };

  render() {
    const { days, hours, minutes, seconds, expired } = this.state;
    if (expired) {
      return <div className="expired">Expired :(</div>;
    }
    return (
      <div className="timer">
        <div>
          {days}
          <span>d</span>
        </div>
        <div>
          {hours}
          <span>h</span>
        </div>
        <div>
          {minutes}
          <span>m</span>
        </div>
        <div>
          {seconds}
          <span>s</span>
        </div>
      </div>
    );
  }
}
export default Timer;

Copy this code


Step 2, Create a CSS file called styles.css with the CSS code below:

.timer {
  display: flex;
  font-size: 20px;
  justify-content: center;
}
.timer > div {
  padding: 10px;
  background: #444;
  color: #fff;
  font-size: 30px;
  margin-right: 2px;
  width: 100px;
  display: flex;
  justify-content: center;
}
.timer > div > span {
  text-transform: uppercase;
  color: #999;
  font-size: 20px;
  display: flex;
  align-items: center;
}
.expired {
  font-size: 20px;
  color: rgb(126, 49, 49);
  border: 1px solid rgb(126, 49, 49);
  padding: 20px;
}

Copy this code


Step 3, Import and use in your app:


import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import Timer from "./Timer";

function App() {
  const startDate = new Date().getTime() + 31536000000; // 1 year (Milliseconds Unit)
  return (
    <div className="App">
      <h1>Timer:</h1>
      <Timer startDate={startDate} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


Copy this code

In the example above, the startDate props is a milliseconds unit value. The Component will render "Expired" when you use the component without props or the timer countdown finished.


Demo: