react-time-sync v3.1.1-alpha1

react-time-sync

A React library to synchronize timers across an application

Usage

When using any timed component, a <TimeProvider> component needs to be in the top of your component hierarchy

Example:

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

const App = ({ content }) => {
  return (
    <div>
      <TimeProvider>
        {content}
      </TimeProvider>
    </div>
  )
};

A component that accepts render props to periodically re-render its children with the time left until a certain millisecond UTC timestamp

Example:

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

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

const until = Date.now() + 5000;

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

Props

until - A UTC millisecond timestamp until when the countdown should run (required) interval - one of TimeSync.SECONDS, TimeSync.MINUTES, TimeSync.HOURS, TimeSync.DAYS (default: TimeSync.SECONDS)

A component that accepts render props to periodically re-render its children with the current time rounded to the specified interval

Example:

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

const MyComponent = () => {
  return (
    <Timed>
    {({ currentTime }) => (
      <div>{`The current time is: ${currentTime}`}</div>
    )}
    </Timed>
  )
}

Props

unit - The number of units of interval (default: 1) interval - one of TimeSync.SECONDS, TimeSync.MINUTES, TimeSync.HOURS, TimeSync.DAYS (default: TimeSync.SECONDS)

connectTime()()

A higher order component meant to be used in combination with redux.

Example:

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

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

function mapStateToProps() {
  const timeSlots = timeSlotSelectors(currentTime)
  return {
    timeSlots
  };
}

const timerConfig = {
  unit: 1,
  interval: SECONDS
}

export default connectTime(timerConfig)(connect(mapStateToProps)(MyComponent));

timerConfig properties

unit - The number of units of interval (default: 1) interval - one of TimeSync.SECONDS, TimeSync.MINUTES, TimeSync.HOURS, TimeSync.DAYS (default: TimeSync.SECONDS)