react-timer-hook - npm Package Compare versions

Comparing version 3.0.8 to 4.0.0

dist/index.d.ts

@@ -5,6 +5,9 @@ interface TimerSettings {
     onExpire?: () => void;
+    enableMilliseconds?: boolean;
 }
 
 interface TimerResult {
+    totalMilliseconds: number;
     totalSeconds: number;
+    milliseconds: number;
     seconds: number;
@@ -26,6 +29,9 @@ minutes: number;
     offsetTimestamp?: Date;
+    enableMilliseconds?: boolean;
 }
 
 interface StopwatchResult {
+    totalMilliseconds: number;
     totalSeconds: number;
+    milliseconds: number;
     seconds: number;
@@ -48,2 +54,3 @@ minutes: number;
 interface TimeResult {
+    milliseconds: number;
     seconds: number;
@@ -50,0 +57,0 @@ minutes: number;

dist/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-timer-hook"]=t(require("react")):e["react-timer-hook"]=t(e.react)}("undefined"!=typeof self?self:this,(e=>(()=>{"use strict";var t={155:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var s=r[e]={exports:{}};return t[e](s,s.exports,o),s.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{default:()=>f,useStopwatch:()=>d,useTime:()=>p,useTimer:()=>l});var s=o(155);class i{static expiryTimestamp(e){const t=new Date(e).getTime()>0;return t||console.warn("react-timer-hook: { useTimer } Invalid expiryTimestamp settings",e),t}static onExpire(e){const t=e&&"function"==typeof e;return e&&!t&&console.warn("react-timer-hook: { useTimer } Invalid onExpire settings function",e),t}}class a{static getTimeFromSeconds(e){const t=Math.ceil(e),r=Math.floor(t/86400),o=Math.floor(t%86400/3600),n=Math.floor(t%3600/60);return{totalSeconds:t,seconds:Math.floor(t%60),minutes:n,hours:o,days:r}}static getSecondsFromExpiry(e,t){const r=e-(new Date).getTime();if(r>0){const e=r/1e3;return t?Math.round(e):e}return 0}static getSecondsFromPrevTime(e,t){const r=(new Date).getTime()-e;if(r>0){const e=r/1e3;return t?Math.round(e):e}return 0}static getSecondsFromTimeNow(){const e=new Date;return e.getTime()/1e3-60*e.getTimezoneOffset()}static getFormattedTimeFromSeconds(e,t){const{seconds:r,minutes:o,hours:n}=a.getTimeFromSeconds(e);let s="",i=n;return"12-hour"===t&&(s=n>=12?"pm":"am",i=n%12),{seconds:r,minutes:o,hours:i,ampm:s}}}function c(e,t){const r=(0,s.useRef)();(0,s.useEffect)((()=>{r.current=e})),(0,s.useEffect)((()=>{if(!t)return()=>{};const e=setInterval((()=>{r.current&&r.current()}),t);return()=>clearInterval(e)}),[t])}const u=1e3;function m(e){if(!i.expiryTimestamp(e))return null;const t=a.getSecondsFromExpiry(e),r=Math.floor(1e3*(t-Math.floor(t)));return r>0?r:u}function l(){let{expiryTimestamp:e,onExpire:t,autoStart:r=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const[o,n]=(0,s.useState)(e),[l,d]=(0,s.useState)(a.getSecondsFromExpiry(o)),[p,f]=(0,s.useState)(r),[g,S]=(0,s.useState)(r),[T,y]=(0,s.useState)(m(o)),h=(0,s.useCallback)((()=>{i.onExpire(t)&&t(),f(!1),y(null)}),[t]),x=(0,s.useCallback)((()=>{f(!1)}),[]),v=(0,s.useCallback)((function(e){let t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];y(m(e)),S(t),f(t),n(e),d(a.getSecondsFromExpiry(e))}),[]),F=(0,s.useCallback)((()=>{const e=new Date;e.setMilliseconds(e.getMilliseconds()+1e3*l),v(e)}),[l,v]),b=(0,s.useCallback)((()=>{g?(d(a.getSecondsFromExpiry(o)),f(!0)):F()}),[o,g,F]);return c((()=>{T!==u&&y(u);const e=a.getSecondsFromExpiry(o);d(e),e<=0&&h()}),p?T:null),{...a.getTimeFromSeconds(l),start:b,pause:x,resume:F,restart:v,isRunning:p}}function d(){let{autoStart:e,offsetTimestamp:t}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const[r,o]=(0,s.useState)(a.getSecondsFromExpiry(t,!0)||0),[n,i]=(0,s.useState)(new Date),[u,m]=(0,s.useState)(r+a.getSecondsFromPrevTime(n||0,!0)),[l,d]=(0,s.useState)(e);c((()=>{m(r+a.getSecondsFromPrevTime(n,!0))}),l?1e3:null);const p=(0,s.useCallback)((()=>{const e=new Date;i(e),d(!0),m(r+a.getSecondsFromPrevTime(e,!0))}),[r]),f=(0,s.useCallback)((()=>{o(u),d(!1)}),[u]),g=(0,s.useCallback)((function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];const r=a.getSecondsFromExpiry(e,!0)||0,n=new Date;i(n),o(r),d(t),m(r+a.getSecondsFromPrevTime(n,!0))}),[]);return{...a.getTimeFromSeconds(u),start:p,pause:f,reset:g,isRunning:l}}function p(){let{format:e}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const[t,r]=(0,s.useState)(a.getSecondsFromTimeNow());return c((()=>{r(a.getSecondsFromTimeNow())}),1e3),{...a.getFormattedTimeFromSeconds(t,e)}}function f(e){if((0,s.useEffect)((()=>{console.warn("react-timer-hook: default export useTimer is deprecated, use named exports { useTimer, useStopwatch, useTime } instead")}),[]),e.expiryTimestamp){const t=l(e);return{...t,startTimer:t.start,stopTimer:t.pause,resetTimer:()=>{}}}const t=d(e);return{...t,startTimer:t.start,stopTimer:t.pause,resetTimer:t.reset}}return n})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-timer-hook"]=t(require("react")):e["react-timer-hook"]=t(e.react)}("undefined"!=typeof self?self:this,(e=>(()=>{"use strict";var t={155:t=>{t.exports=e}},s={};function o(e){var r=s[e];if(void 0!==r)return r.exports;var i=s[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.d=(e,t)=>{for(var s in t)o.o(t,s)&&!o.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};o.r(r),o.d(r,{default:()=>p,useStopwatch:()=>m,useTime:()=>d,useTimer:()=>u});var i=o(155);class n{static getTimeFromMilliseconds(e){const t=arguments.length>1&&void 0!==arguments[1]&&!arguments[1]?Math.floor(e/1e3):Math.ceil(e/1e3),s=Math.floor(t/86400),o=Math.floor(t%86400/3600),r=Math.floor(t%3600/60),i=Math.floor(t%60);return{totalMilliseconds:e,totalSeconds:t,milliseconds:Math.floor(e%1e3),seconds:i,minutes:r,hours:o,days:s}}static getMillisecondsFromExpiry(e){const t=e-(new Date).getTime();return t>0?t:0}static getMillisecondsFromPrevTime(e){const t=(new Date).getTime()-e;return t>0?t:0}static getMillisecondsFromTimeNow(){const e=new Date;return e.getTime()-60*e.getTimezoneOffset()*1e3}static getFormattedTimeFromMilliseconds(e,t){const{milliseconds:s,seconds:o,minutes:r,hours:i}=n.getTimeFromMilliseconds(e);let l="",a=i;return"12-hour"===t&&(l=i>=12?"pm":"am",a=i%12),{milliseconds:s,seconds:o,minutes:r,hours:a,ampm:l}}}class l{static expiryTimestamp(e){const t=new Date(e).getTime()>0;return t||console.warn("react-timer-hook: { useTimer } Invalid expiryTimestamp settings",e),t}static onExpire(e){const t=e&&"function"==typeof e;return e&&!t&&console.warn("react-timer-hook: { useTimer } Invalid onExpire settings function",e),t}}function a(e,t){const s=(0,i.useRef)();(0,i.useEffect)((()=>{s.current=e})),(0,i.useEffect)((()=>{if(!t)return()=>{};const e=setInterval((()=>{s.current&&s.current()}),t);return()=>clearInterval(e)}),[t])}const c=1e3;function u(){let{expiryTimestamp:e,onExpire:t,autoStart:s=!0,interval:o=c}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const[r,u]=(0,i.useState)(e),[m,d]=(0,i.useState)(n.getMillisecondsFromExpiry(r)),[p,f]=(0,i.useState)(s),[g,T]=(0,i.useState)(s),[M,v]=(0,i.useState)(o),y=(0,i.useCallback)((()=>{l.onExpire(t)&&t(),f(!1),v(null)}),[t]),h=(0,i.useCallback)((()=>{f(!1)}),[]),x=(0,i.useCallback)((function(e){let t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];v(o),T(t),f(t),u(e),d(n.getMillisecondsFromExpiry(e))}),[o]),F=(0,i.useCallback)((()=>{const e=new Date;e.setMilliseconds(e.getMilliseconds()+m),x(e)}),[m,x]),w=(0,i.useCallback)((()=>{g?(d(n.getMillisecondsFromExpiry(r)),f(!0)):F()}),[r,g,F]);return a((()=>{const e=n.getMillisecondsFromExpiry(r);d(e),e<=0?y():e<M&&v(e)}),p?M:null),(0,i.useEffect)((()=>{l.expiryTimestamp(r)}),[r]),{...n.getTimeFromMilliseconds(m),start:w,pause:h,resume:F,restart:x,isRunning:p}}function m(){let{autoStart:e,offsetTimestamp:t,interval:s=c}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const o=n.getMillisecondsFromExpiry(t)||0,[r,l]=(0,i.useState)(new Date-new Date(o)),[u,m]=(0,i.useState)(n.getMillisecondsFromPrevTime(r||0)),[d,p]=(0,i.useState)(e),f=c-u%c,[g,T]=(0,i.useState)(s<f?s:f);a((()=>{g!==s&&T(s),m(n.getMillisecondsFromPrevTime(r))}),d?g:null);const M=(0,i.useCallback)((()=>{l(new Date-new Date(u)),p(!0)}),[u]),v=(0,i.useCallback)((()=>{m(n.getMillisecondsFromPrevTime(r)),p(!1)}),[r]),y=(0,i.useCallback)((function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];const o=n.getMillisecondsFromExpiry(e)||0,r=new Date-new Date(o),i=n.getMillisecondsFromPrevTime(r),a=c-i%c;l(r),m(i),T(s<a?s:a),p(t)}),[s]);return{...n.getTimeFromMilliseconds(u,!1),start:M,pause:v,reset:y,isRunning:d}}function d(){let{format:e,interval:t=c}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const[s,o]=(0,i.useState)(n.getMillisecondsFromTimeNow());return a((()=>{o(n.getMillisecondsFromTimeNow())}),t),{...n.getFormattedTimeFromMilliseconds(s,e)}}function p(e){if((0,i.useEffect)((()=>{console.warn("react-timer-hook: default export useTimer is deprecated, use named exports { useTimer, useStopwatch, useTime } instead")}),[]),e.expiryTimestamp){const t=u(e);return{...t,startTimer:t.start,stopTimer:t.pause,resetTimer:()=>{}}}const t=m(e);return{...t,startTimer:t.start,stopTimer:t.pause,resetTimer:t.reset}}return r})()));

package.json

 {
   "name": "react-timer-hook",
-  "version": "3.0.8",
+  "version": "4.0.0",
   "description": "React timer hook is a custom react hook built to handle timers(countdown), stopwatch and time logic/state in your react component.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

readme.md

@@ -28,2 +28,3 @@ ## react-timer-hook
     totalSeconds,
+    milliseconds,
     seconds,
@@ -38,3 +39,3 @@ minutes,
     restart,
-  } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });
+  } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called'), interval: 20 });
 
@@ -47,3 +48,3 @@
       <div style={{fontSize: '100px'}}>
-        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
+        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>:<span>{milliseconds}</span>
       </div>
@@ -81,2 +82,3 @@ <p>{isRunning ? 'Running' : 'Not running'}</p>
 | autoStart | boolean | No | flag to decide if timer should start automatically, by default it is set to `true` |
+| interval | number | No | value to change the interval of the timer, by default it is set to 1000ms. Note: this value will not affect the timer, it will just define the frequency used to calculate the current timer values. For example, if you have a use case where milliseconds are used, you need to use a smaller value for the interval, for example, 20ms or 100ms based on your needs. |
 | onExpire | Function | No | callback function to be executed once countdown timer is expired |
@@ -89,2 +91,3 @@
 | --- | --- | ---- |
+| milliseconds | number | milliseconds value, to get accurate ms values you need to set interval to a smaller value example: 20ms |
 | seconds | number | seconds value |
@@ -95,2 +98,3 @@ | minutes | number | minutes value |
 | totalSeconds | number | total number of seconds left in timer NOT converted to minutes, hours or days |
+| totalMilliseconds | number | total number of milliseconds left in timer NOT converted to minutes, hours or days |
 | isRunning | boolean | flag to indicate if timer is running or not |
@@ -116,2 +120,3 @@ | pause | function | function to be called to pause timer |
     totalSeconds,
+    milliseconds,
     seconds,
@@ -125,3 +130,3 @@ minutes,
     reset,
-  } = useStopwatch({ autoStart: true });
+  } = useStopwatch({ autoStart: true, interval: 20 });
 
@@ -134,3 +139,3 @@
       <div style={{fontSize: '100px'}}>
-        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
+        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>:<span>{milliseconds}</span>
       </div>
@@ -160,2 +165,3 @@ <p>{isRunning ? 'Running' : 'Not running'}</p>
 | offsetTimestamp | Date object | No | this will define the initial stopwatch offset example: `const stopwatchOffset = new Date(); stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300);` this will result in a 5 minutes offset and stopwatch will start from 0:0:5:0 instead of 0:0:0:0 |
+| interval | number | No | value to change the interval of the stopwatch, by default it is set to 1000ms. Note: this value will not affect the stopwatch, it will just define the frequency used to calculate the current timer values. For example, if you have a use case where milliseconds are used, you need to use a smaller value for the interval, for example, 20ms or 100ms based on your needs. |
 
@@ -166,2 +172,3 @@ ### Values
 | --- | --- | ---- |
+| milliseconds | number | milliseconds value, to get accurate ms values you need to set interval to a smaller value example: 20ms |
 | seconds | number | seconds value |
@@ -191,2 +198,3 @@ | minutes | number | minutes value |
   const {
+    milliseconds,
     seconds,
@@ -196,3 +204,3 @@ minutes,
     ampm,
-  } = useTime({ format: '12-hour'});
+  } = useTime({ format: '12-hour', interval: 20 });
 
@@ -204,3 +212,3 @@ return (
       <div style={{fontSize: '100px'}}>
-        <span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span><span>{ampm}</span>
+        <span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span><span>{milliseconds}</span><span>{ampm}</span>
       </div>
@@ -225,2 +233,3 @@ </div>
 | format | string | No | if set to `12-hour` time will be formatted with am/pm |
+| interval | number | No | value to change the interval of the time, by default it is set to 1000ms. Note: this value will not affect the thime, it will just define the frequency used to calculate the current time values. For example, if you have a use case where milliseconds are used, you need to use a smaller value for the interval, for example, 20ms or 100ms based on your needs. |
 
@@ -231,2 +240,3 @@ ### Values
 | --- | --- | ---- |
+| milliseconds | number | milliseconds value |
 | seconds | number | seconds value |
@@ -233,0 +243,0 @@ | minutes | number | minutes value |

No alert changes

Improved metrics

Total package byte prevSize

21301

11.26%

Lines of code

51

15.91%

Number of lines in readme file

237

4.41%

No dependency changes