Hide HN: Sync animations and timers across a react app

A React library to synchronize timers across an application. Requires React v16.8 or greater.

Mediate my talk from React Day Berlin to realise why that it is doubtless you will have it.

Utilization

useCountdown hook

A customised hook which returns the time left unless a sure millisecond UTC timestamp is reached

Example:

import { useCountdown } from "react-time-sync";

const MyComponent = ({ unless }) => {
  const timeLeft = useCountdown({ unless });
  return div>{timeLeft > 0 ? `${timeLeft} seconds left` : "Achieved!"}/div>;
};

Input

The useCountdown hook expects an object with the following properties as the single argument:

unless – A UTC millisecond timestamp unless when the countdown would possibly maybe perhaps nonetheless bustle (default: 0)

interval – one of TimeSync.SECONDS, TimeSync.MINUTES, TimeSync.HOURS, TimeSync.DAYS (default: TimeSync.SECONDS)

useTime hook

A customised hook which returns the most fresh time rounded to the required interval

Example:

import { useTime } from "react-time-sync";

const MyComponent = () => {
  const currentTime = useTime();
  return div>{`The most modern time is: ${currentTime}`}/div>;
};

Input

The useTime hook expects an object with the following properties as the single argument:

unit – The style of fashions of interval (default: 1)

interval – one of TimeSync.SECONDS, TimeSync.MINUTES, TimeSync.HOURS, TimeSync.DAYS (default: TimeSync.SECONDS)

Countdown

A ingredient that accepts render props to periodically re-render its youngsters with the time left unless a sure millisecond UTC timestamp

Example:

import { Countdown } from 'react-time-sync';

const MyComponent = ({ unless }) => {
  return (
    Countdown until={until}>
      {({ timeLeft }) => (
        div>{timeLeft > 0 ? `${timeLeft} seconds left` : 'Achieved!'}/div>
      )}
    /Countdown>
  )
}

const unless = Date.now() + 5000;

ReactDOM.render(MyComponent until={until} />, ...);

Props

unless – A UTC millisecond timestamp unless when the countdown would possibly maybe perhaps nonetheless bustle (required)

interval – one of TimeSync.SECONDS, TimeSync.MINUTES, TimeSync.HOURS, TimeSync.DAYS (default: TimeSync.SECONDS)

Timed

A ingredient that accepts render props to periodically re-render its youngsters with the most fresh time rounded to the required interval

Example:

import { Timed } from "react-time-sync";

const MyComponent = () => {
  return (
    Timed>
      {({ currentTime }) => div>{`The most modern time is: ${currentTime}`}/div>}
    /Timed>
  );
};

Props

unit – The style of fashions of interval (default: 1)

interval – one of TimeSync.SECONDS, TimeSync.MINUTES, TimeSync.HOURS, TimeSync.DAYS (default: TimeSync.SECONDS)

connectTime()()

A better divulge ingredient meant to be ragged in combination with redux.

Example:

import { connectTime, SECONDS } from "react-time-sync";

const timeSlotsSelector = createSelector(
  (currentTime) => currentTime,
  (currentTime) => [currentTime - 1, currentTime + 1]
);

feature mapStateToProps({ currentTime }) {
  const timeSlots = timeSlotSelectors(currentTime)