Hey guys, It’s been a long time since I posted something on ReactJS. Today I’, gonna post about a count down timer that will be created with the help of React. I’ll call it React Countdown Component.

This type of timer can easily be added anywhere in or in any type, it has that good flipping animation that makes it look modern and somewhat alive.

As you know this is just a general countdown timer build in react, I do not think there is much need for me to explain. If you are unable to make it run, check this post out on how to settle things with React.

Preview of React Countdown Component

You might also like this.

How to make React Countdown component?

React Countdown component

In order to make it work, we will create a new class with the state on our JSX file, which will contain the function to create and set a new time, below it, there will be another function that will get the current time and subtract it with the given time.

This piece of the line will be used to give details about the targeted date.

const app = <CountDown targetDate="Oct 25, 2020" targetTime="18:00:00" />;

You can edit that targeted date and targeted time in order to change the timer of the countdown to your needs. Now check out the source code.

Source Code

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="app"></div>

CSS

body, html {
  height: 100%;
}

body {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
//countdown component styles
.counter {
  // margin: 0 -5px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  width: 100%;
  background-color: rgba(0,0,0,0.6);
}

.entry {
  text-align: center;
  padding: 5px;

  .entry-value {
    position: relative;
    height: 95px;
    perspective: 200px;
    backface-visibility: hidden;
    transform: translateZ(0);
    transform: translate3d(0, 0, 0);
    margin: 0 auto;
  }

  .entry-title {
    min-width: 80px;
    color: #fff;
    margin-top: 10px;
    font-weight: bold;
  }
}

.count {
  background-color: #202020;
  color: #fff;
  display: block;
  font-size: 2em;
  line-height: 2.4em;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;

  &.top {
    height: 50%;
    line-height: 95px;
    transform-origin: 50% 100%;
  }

  &.bottom {
    line-height: 0;
    height: 50%;
    top: 50%;
    transform-origin: 50% 0;
  }

  &.flipTop {
    animation-name: flipTop;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    z-index: 1;
  }
  &.flipBottom {
    animation-name: flipBottom;
    animation-duration: 0.3s;
    animation-delay: 0.3s;
    animation-fill-mode: both;
    z-index: 1;
  }
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
  text-align: center;
}

@keyframes flipTop {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-90deg);
  }
}
@keyframes flipBottom {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

JSX

const { Component, Fragment } = React;

class CountDown extends Component {
  state = {
    remaining: {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    },
    isExpired: false
  };
  // used to set and clear interval
  timer;
  // used to calculate the distance between "current date and time" and the "target date and time"
  distance;

  componentDidMount() {
    this.setDate();
    this.counter();
  }

  setDate = () => {
    const { targetDate, targetTime } = this.props,
      // Get todays date and time
      now = new Date().getTime(),
      // Set the date we're counting down to
      countDownDate = new Date(targetDate + " " + targetTime).getTime();
    
    // Find the distance between now and the count down date
    this.distance = countDownDate - now;
    
    // target date and time is less than current date and time
    if (this.distance < 0) {
      clearInterval(this.timer);
      this.setState({ isExpired: true });
    } else {
      this.setState({
        remaining: {
          days: Math.floor(this.distance / (1000 * 60 * 60 * 24)),
          hours: Math.floor(
            (this.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          ),
          minutes: Math.floor((this.distance % (1000 * 60 * 60)) / (1000 * 60)),
          seconds: Math.floor((this.distance % (1000 * 60)) / 1000)
        },
        isExpired: false
      });
    }
  };

  counter = () => {
    this.timer = setInterval(() => {
      this.setDate();
    }, 1000);
  };

  render() {
    const { remaining, isExpired } = this.state,
    {targetDate, targetTime} = this.props;
    
    return (
      <Fragment>
        {!isExpired && targetDate && targetTime ? (
          <div className="counter">
            {Object.entries(remaining).map((el, i) => (
              <div key={i} className="entry">
                <div key={el[1]} className="entry-value">
                  <span className="count top curr flipTop">{el[1] + 1}</span>
                  <span className="count top next">{el[1]}</span>
                  <span className="count bottom next flipBottom">{el[1]}</span>
                  <span className="count bottom curr">{el[1] + 1}</span>
                </div>
                <div className="entry-title">{el[0].toUpperCase()}</div>
              </div>
            ))}
          </div>
        ) : (
          <p className="alert-danger">Expired</p>
        )}
      </Fragment> 
    );
  }
}

const app = <CountDown targetDate="Oct 25, 2020" targetTime="18:00:00" />;

ReactDOM.render(app, document.querySelector("#app"));

So this is how we create our React Countdown Component.

CodePen

See the Pen React countdown by Kamran Tahir (@EvilSpark) on CodePen.

0 CommentsClose Comments

Leave a comment