Gathering detailed insights and metrics for react-better-countdown-hook
Gathering detailed insights and metrics for react-better-countdown-hook
Gathering detailed insights and metrics for react-better-countdown-hook
Gathering detailed insights and metrics for react-better-countdown-hook
react-countdown
A customizable countdown component for React.
react-countdown-hook
Dead simple yet powerful countdown hook for React.
react-hook-form
Performant, flexible and extensible forms library for React Hooks
react-timer-hook
React timer hook is a custom react hook built to handle timers(countdown), stopwatch and time logic/state in your react component.
npm install react-better-countdown-hook
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
2 Stars
9 Commits
2 Watching
1 Branches
1 Contributors
Updated on 15 Nov 2022
TypeScript (78.09%)
JavaScript (18.03%)
HTML (3.88%)
Cumulative downloads
Total Downloads
Last day
-80%
1
Compared to previous day
Last week
-71.4%
2
Compared to previous week
Last month
84.6%
24
Compared to previous month
Last year
18.1%
287
Compared to previous year
Super simple and lightweight countdown timer hook with most of the functionality you would need.
Built with typescript :)
The aim of the library is to remain as small as possible.
Using npm:
1$ npm install --save react-better-countdown-hook
Using yarn:
1$ yarn add react-better-countdown-hook
1import React, { useEffect, useState } from "react"; 2import ReactDOM from "react-dom"; 3import useCountDown from "react-better-countdown-hook"; 4 5const App: React.FunctionComponent = () => { 6 const [ 7 { milliseconds, seconds, minutes, hours, days }, 8 { start, reset, pause }, 9 ] = useCountDown({ 10 // Start time in milliseconds 11 startTimeMilliseconds: 6000, 12 // Decrement to update the timer with 13 interval: 500, 14 // Callback triggered when the timer reaches 0 15 onCountDownEnd: () => { 16 console.log("ended"); 17 }, 18 }); 19 20 return ( 21 <> 22 <div> 23 <p> 24 Milliseconds: {milliseconds} Second: {seconds} Minute: {minutes} 25 Hours: {hours} Days: {days} 26 <button onClick={start}>start</button> 27 <button onClick={reset}>reset </button> 28 <button onClick={pause}>pause</button> 29 </p> 30 </div> 31 </> 32 ); 33}; 34 35const MOUNT_NODE = document.getElementById("react-root"); 36ReactDOM.render(<App />, MOUNT_NODE);
1const [ 2 /** Time in milliseconds, seconds, minutes, hours, days */ 3 { milliseconds, seconds, minutes, hours, days }, 4 { start, reset, pause }, 5] = useCountDown({ 6 // Start time in milliseconds 7 startTimeMilliseconds: 6000, 8 // Decrement to update the timer with 9 interval: 500, 10 // Callback triggered when the timer reaches 0 11 onCountDownEnd: () => { 12 console.log("ended"); 13 }, 14});
Property | Type | Is Optional | Description |
---|---|---|---|
milliseconds | number | true | Current timer value in milliseconds |
seconds | number | true | Current timer value in seconds |
minutes | number | true | Current timer value in minutes |
hours | number | true | Current timer value in hours |
days | number | true | Current timer value in days |
start | function | true | Function to start the timer |
pause | function | true | Function to pause/stop the timer |
reset | function | true | Function to pause and then reset the timer |
startTimeMilliseconds | number | false | Start time of the timer in milliseconds |
interval | number | false | Value to decrement |
onCountDownEnd | function | true | Callback to trigger when the timer reaches 0 |
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/9 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
75 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More