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:




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;
}



Step 3, Import and use in your app:



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.


© 2019 4codev

Created with love by Sil.