use-elapsed-time - npm Package Compare versions

Comparing version 2.0.1 to 2.1.1

CHANGELOG.md

 # Change Log
 
-## 2.0.0 (May 11nd, 2020)
+## 2.1.1 (May 13th, 2020)
 
+**Implemented enhancements:**
+
+- `autoResetKey` is a new prop that allows resetting the animation when the key changes. It works similar to React's `key` prop
+
+## 2.0.1 (May 12th, 2020)
+
+**Bug fix:**
+
+Fix an issue where resetting the animation once it was done when the `isPlaying` was set to true did not start playing after the reset
+
+## 2.0.0 (May 11th, 2020)
+
 **Breaking Changes:**
@@ -11,3 +23,3 @@
 - `onComplete` will receive as an argument the `totalElapsedTime` in **seconds**. The animation can now be repeated by returning an object instead of an array. The object may have the following params: `shouldRepeat` indicates if the loop should start over; `delay` - delay before looping again in seconds; `newStartAt` set new start at value. |
-- Changing the `duration` while the loop is running will update the duration - if the new duration is more than the previous one, the measurement of the elapsed time will continue to the new duration; if the duration is less than the previous one, the `onComplete` callback will be fired. This behaviour can now be changed by passing `shouldResetOnDurationChange: true` so when a new duration is provided the animation loop will start over.
+- Changing the `duration` while the loop is running will update the duration - if the new duration is more than the previous one, the measurement of the elapsed time will continue to the new duration; if the duration is less than the previous one, the `onComplete` callback will be fired.
 
@@ -14,0 +26,0 @@ **Implemented enhancements:**

lib/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var u=t[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,r),u.l=!0,u.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var u in e)r.d(n,u,function(t){return e[t]}.bind(null,u));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t){e.exports=require("react")},function(e,t,r){"use strict";r.r(t),r.d(t,"useElapsedTime",(function(){return i}));var n=r(0);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,u=!1,o=void 0;try{for(var i,c=e[Symbol.iterator]();!(n=(i=c.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){u=!0,o=e}finally{try{n||null==c.return||c.return()}finally{if(u)throw o}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return o(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return o(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.duration,o=t.onComplete,i=t.startAt,c=void 0===i?0:i,a=t.shouldResetOnDurationChange,f=void 0!==a&&a,l=Object(n.useState)(c),s=u(l,2),d=s[0],b=s[1],m=Object(n.useRef)(-1e3*c),y=Object(n.useRef)(null),p=Object(n.useRef)(null),v=Object(n.useRef)(null),j=Object(n.useRef)(!0),O=Object(n.useRef)(!1),g=Object(n.useRef)(0),h=Object(n.useCallback)((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:c;g.current+=1,b(e)}),[]),A=function e(t){var n=t/1e3;if(null===p.current)return p.current=n,void(y.current=requestAnimationFrame(e));b((function(t){var u=t+(n-p.current);if("number"!=typeof r||u<r)return p.current=n,y.current=requestAnimationFrame(e),u;if(O.current=!0,"function"==typeof o){m.current+=1e3*r;var i=m.current/1e3,c=o(i)||{},a=c.shouldRepeat,f=void 0!==a&&a,l=c.delay,s=void 0===l?0:l,d=c.newStartAt;f&&(v.current=setTimeout((function(){h(d)}),1e3*s))}return r}))},S=function(){cancelAnimationFrame(y.current),clearTimeout(v.current),p.current=null};return Object(n.useLayoutEffect)((function(){return e&&(y.current=requestAnimationFrame(A)),S}),[e]),Object(n.useLayoutEffect)((function(){j.current?j.current=!1:(e&&(S(),y.current=requestAnimationFrame(A)),f&&h())}),[r]),Object(n.useLayoutEffect)((function(){e&&O.current&&(O.current=!1,S(),y.current=requestAnimationFrame(A))}),[g.current]),{elapsedTime:d,reset:h}}}]);
+module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var u=t[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,r),u.l=!0,u.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var u in e)r.d(n,u,function(t){return e[t]}.bind(null,u));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t){e.exports=require("react")},function(e,t,r){"use strict";r.r(t),r.d(t,"useElapsedTime",(function(){return c}));var n=r(0);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,u=!1,o=void 0;try{for(var c,i=e[Symbol.iterator]();!(n=(c=i.next()).done)&&(r.push(c.value),!t||r.length!==t);n=!0);}catch(e){u=!0,o=e}finally{try{n||null==i.return||i.return()}finally{if(u)throw o}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return o(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return o(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var c=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.duration,o=t.onComplete,c=t.startAt,i=void 0===c?0:c,a=t.autoResetKey,f=Object(n.useState)(i),l=u(f,2),s=l[0],b=l[1],y=Object(n.useRef)(-1e3*i),d=Object(n.useRef)(null),m=Object(n.useRef)(null),p=Object(n.useRef)(null),v=Object(n.useRef)(!0),j=Object(n.useRef)(!1),O=Object(n.useRef)(0),g=Object(n.useCallback)((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i;O.current+=1,b(e)}),[]),A=function e(t){var n=t/1e3;if(null===m.current)return m.current=n,void(d.current=requestAnimationFrame(e));b((function(t){var u=t+(n-m.current);if("number"!=typeof r||u<r)return m.current=n,d.current=requestAnimationFrame(e),u;if(j.current=!0,"function"==typeof o){y.current+=1e3*r;var c=y.current/1e3,i=o(c)||{},a=i.shouldRepeat,f=void 0!==a&&a,l=i.delay,s=void 0===l?0:l,b=i.newStartAt;f&&(p.current=setTimeout((function(){g(b)}),1e3*s))}return r}))},h=function(){cancelAnimationFrame(d.current),clearTimeout(p.current),m.current=null};return Object(n.useLayoutEffect)((function(){return e&&(d.current=requestAnimationFrame(A)),h}),[e]),Object(n.useLayoutEffect)((function(){e&&!v.current&&(h(),d.current=requestAnimationFrame(A))}),[r]),Object(n.useLayoutEffect)((function(){v.current||g()}),[a]),Object(n.useLayoutEffect)((function(){e&&j.current&&(j.current=!1,h(),d.current=requestAnimationFrame(A))}),[O.current]),Object(n.useLayoutEffect)((function(){v.current=!1}),[]),{elapsedTime:s,reset:g}}}]);

package.json

 {
   "name": "use-elapsed-time",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "React hook to measure elapsed time using requestAnimationFrame",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -49,3 +49,3 @@ # useElapsedTime React hook
       startAt?: number,
-      shouldResetOnDurationChange?: boolean,
+      autoResetKey?: string | number,
       onComplete?: (totalElapsedTime: number) => void | { shouldRepeat: boolean, delay: number, newStartAt: number }
@@ -69,8 +69,8 @@ }
 
-| Prop Name                   | Type                                                                                               | Default | Description                                                                                                                                                                                                                                                                                                                                                                                             |
-| --------------------------- | -------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| duration                    | number                                                                                             | -       | Animation duration in seconds                                                                                                                                                                                                                                                                                                                                                                           |
-| startAt                     | number                                                                                             | 0       | Shift the start time to a different value than 0                                                                                                                                                                                                                                                                                                                                                        |
-| shouldResetOnDurationChange | boolean                                                                                            | false   | Reset elapsed time when the duration changes                                                                                                                                                                                                                                                                                                                                                            |
-| onComplete                  | (totalElapsedTime: number) => void \| { shouldRepeat: boolean, delay: number, newStartAt: number } | -       | `onComplete` callback will be fired when the duration is reached. The callback will receive as an argument the `totalElapsedTime` in seconds. `onComplete` can be used to restart the elapsed time loop by returning an object with the following params: `shouldRepeat` indicates if the loop should start over; `delay` - delay before looping again in seconds; `newStartAt` set new start at value. |
+| Prop Name    | Type                                                                                               | Default | Description                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------ | -------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| duration     | number                                                                                             | -       | Animation duration in seconds                                                                                                                                                                                                                                                                                                                                                                           |
+| startAt      | number                                                                                             | 0       | Shift the start time to a different value than 0                                                                                                                                                                                                                                                                                                                                                        |
+| autoResetKey | string \| number                                                                                   | -       | Auto reset animation when the key changes. It works similar to React's `key` prop                                                                                                                                                                                                                                                                                                                       |
+| onComplete   | (totalElapsedTime: number) => void \| { shouldRepeat: boolean, delay: number, newStartAt: number } | -       | `onComplete` callback will be fired when the duration is reached. The callback will receive as an argument the `totalElapsedTime` in seconds. `onComplete` can be used to restart the elapsed time loop by returning an object with the following params: `shouldRepeat` indicates if the loop should start over; `delay` - delay before looping again in seconds; `newStartAt` set new start at value. |
 
@@ -77,0 +77,0 @@ ### Return value `{ elapsedTime, reset }`

types/use-elapsed-time.d.ts

@@ -23,4 +23,4 @@ export interface ElapsedTimeReturnValue {
   startAt?: number
-  /** Reset elapsed time when the duration changes. Default: false */
-  shouldResetOnDurationChange?: boolean
+  /** Auto reset animation when the key changes. It works similar to React's key prop */
+  autoResetKey?: string | number
   /** On animation complete event handler. It can be used to restart/repeat the animation by returning an object */
@@ -27,0 +27,0 @@ onComplete?: (totalElapsedTime: number) => void | OnCompleteRepeat

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14690

increased by1.42%

No dependency changes