Build a React.js Live Digital Clock in Browser Using react-live-clock Library Using Javascript Full Project For Beginners



react-live-clock npm

Gitter Dependencies Dev Dependencies

React clock with time-zones DEMO



Don’t forget to manually install peer dependencies (react) if you use npm@3.




** Shows current time for ‘US/Pacific’ timezone and updates every second


you can use any formatting from moment.js date library


Propertie Type Default Value Description
date timestamp or string current date Date to output, If nothing is set then it take current date.
format string ‘HH:MM’ Formatting from moment.js library.
filter function (date: String) => date Filtering the value before the output .
timezone string null If timezone is set, the date is show in this timezone. You can find the list. here, the TZ column.
ticking boolean false If you want the clock to be auto-updated every interval seconds.
interval integer 1000 Auto-updating period for the clock. 1 second is a default value.
className string null Extra class.
children string null date can be set as a children prop.
onChange function ({output, previousOutput, moment}) => {} callback function on each output update



Leave a Reply