Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-time-sync
Advanced tools
Readme
A React library to synchronize timers across an application. Requires React v16.8 or higher.
Watch my talk from React Day Berlin to understand why you might need it.
A custom hook which returns the time left until a certain millisecond UTC timestamp is reached
Example:
import { useCountdown } from "react-time-sync";
const MyComponent = ({ until }) => {
const timeLeft = useCountdown({ until });
return <div>{timeLeft > 0 ? `${timeLeft} seconds left` : "Done!"}</div>;
};
The useCountdown
hook expects an object with the following properties as the single argument:
until
- A UTC millisecond timestamp until when the countdown should run (default: 0)
interval
- one of TimeSync.SECONDS
, TimeSync.MINUTES
, TimeSync.HOURS
, TimeSync.DAYS
(default: TimeSync.SECONDS
)
A custom hook which returns the current time rounded to the specified interval
Example:
import { useTime } from "react-time-sync";
const MyComponent = () => {
const currentTime = useTime();
return <div>{`The current time is: ${currentTime}`}</div>;
};
The useTime
hook expects an object with the following properties as the single argument:
unit
- The number of units of interval
(default: 1
)
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 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} />, ...);
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>
);
};
unit
- The number of units of interval
(default: 1
)
interval
- one of TimeSync.SECONDS
, TimeSync.MINUTES
, TimeSync.HOURS
, TimeSync.DAYS
(default: TimeSync.SECONDS
)
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,
(currentTime) => [currentTime - 1, currentTime + 1]
);
function mapStateToProps({ currentTime }) {
const timeSlots = timeSlotSelectors(currentTime);
return {
timeSlots,
};
}
const timerConfig = {
unit: 1,
interval: SECONDS,
};
export default connectTime(timerConfig)(connect(mapStateToProps)(MyComponent));
unit
- The number of units of interval
(default: 1
)
interval
- one of TimeSync.SECONDS
, TimeSync.MINUTES
, TimeSync.HOURS
, TimeSync.DAYS
(default: TimeSync.SECONDS
)
You can use a <TimeProvider>
component to use a custom instance of TimeSync
, e.g. when you want to synchronize timers across your application
Example:
import { useState } from "react";
import { TimeProvider } from "react-time-sync";
import TimeSync from "time-sync";
const App = ({ children }) => {
const [timeSync] = useState(() => new TimeSync());
return (
<div>
<TimeProvider timeSync={timeSync}>{children}</TimeProvider>
</div>
);
};
timeSync
- A custom TimeSync
instance that should be passed down with the context. (default: new TimeSync()
)
FAQs
A React library to synchronize timers across an application
The npm package react-time-sync receives a total of 1,581 weekly downloads. As such, react-time-sync popularity was classified as popular.
We found that react-time-sync demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.