Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
react-countdown-hook
Advanced tools
Readme
Dead simple yet powerful countdown hook for React. Powered by requestAnimationFrame
.
Using npm:
$ npm install --save react-countdown-hook
Using yarn:
$ yarn add react-countdown-hook
import React from 'react';
import useCountDown from 'react-countdown-hook';
const initialTime = 60 * 1000; // initial time in milliseconds, defaults to 60000
const interval = 1000; // interval to change remaining time amount, defaults to 1000
const render = () => {
const [timeLeft, { start, pause, resume, reset }] = useCountDown(initialTime, interval);
// start the timer during the first render
React.useEffect(() => {
start();
}, []);
const restart = React.useCallback(() => {
// you can start existing timer with an arbitrary value
// if new value is not passed timer will start with initial value
const newTime = 42 * 1000;
start(newTime);
}, []);
return (
<>
<p>Time left: {timeLeft}</p>
<button onClick={restart}>
Restart counter with 42 seconds
</button>
</>
);
}
Note that this is a very basic usage. Check out more usage examples in playground or in the demo project
Takes a default countdown time and interval time.
timeToCount
{Number
} Time in milliseconds that countdown should start with. Defaults to 60000
interval
{Number
} Time in milliseconds representing the frequency that countdown should update with. Defaults to 1000
Returns an array with remaining time and actions object.
timeLeft
{Number
} Remaining countdown time in millisecondsactions.start
{Function
} Start or restart a countdown. Takes time in milliseconds to start with.actions.reset
{Function
} Resets a countdown to initial stateactions.pause
{Function
} Pauses a countdownactions.resume
{Function
} Resumes a paused countdownFeel free to submit any issues or pull requests.
MIT
FAQs
Dead simple yet powerful countdown hook for React.
The npm package react-countdown-hook receives a total of 5,903 weekly downloads. As such, react-countdown-hook popularity was classified as popular.
We found that react-countdown-hook 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
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.