Knowasiak
Hide HN: Sync animations and timers across a react app

Hide HN: Sync animations and timers across a react app

These items are slightly awesome!!

npm (scoped) Actions Status codecov Renovate semantic-release

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.

Example

Utilization

useCountdown hook

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

Example:

{
const timeLeft=useCountdown({ unless });
return

{timeLeft> 0 ? `${timeLeft} seconds left` : “Achieved!”}

;
};”>

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:

{
const currentTime=useTime();
return

{`The most modern time is: ${currentTime}`}

;
};”>

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:

{
return (

{({ currentTime })=>

{`The most modern time is: ${currentTime}`}

}

);
};”>

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:

currentTime,
(currentTime)=> [currentTime – 1, currentTime + 1]
);

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

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

export default connectTime(timerConfig)(join(mapStateToProps)(MyComponent));”>

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

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

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

Read More
Portion this on knowasiak.com to seek advice from with of us on this topicRegister on Knowasiak.com now if you occur to’re no longer registered yet.

About the author: Charlie
Fill your life with experiences so you always have a great story to tell

Get involved!

Get Connected!
One of the Biggest Social Platform for Entrepreneurs, College Students and all. Come and join our community. Expand your network and get to know new people!

Discussion(s)

No comments yet
Knowasiak We would like to show you notifications so you don't miss chats & status updates.
Dismiss
Allow Notifications