react-clock-interval

🕰 Almost accurate clock component for react

This component implements the setInterval logic to render a clock and prevent the following issues:

• Skip some seconds
• Not on sync with system clock

Features

• Works on react-dom and react-native (it should work on other renderers too)
• You can render it whatever you like
• TypeScript support

Install

npm

npm install react-clock-interval

yarn

yarn add react-clock-interval

API

Prop	Type	Required	Description
children	function	✔	A render prop that will give you the current date and you can render it whatever you like.
initialDateTime	Date	❌	By default, the clock provides the system date. If you wish to start on some specific date instead, set it on this prop.
forceUpdateInitialDateTime	boolean	❌	Forces the clock time to update.

Example

import React from 'react';
import Clock from 'react-clock-interval';

class Example extends React.Component {
  render() {
    return (
      <Clock>
        {dateTime => <div>{dateTime.toString()}</div>}
      </Clock>
    );
  }
}

Thanks

• https://taylorhakes.com/posts/creating-a-clock-with-setinterval/