use-elapsed-time - npm Package Compare versions

Comparing version 1.1.6 to 1.2.0

lib/index.js

@@ -1,1 +0,1 @@
-module.exports=function(r){var t={};function e(n){if(t[n])return t[n].exports;var u=t[n]={i:n,l:!1,exports:{}};return r[n].call(u.exports,u,u.exports,e),u.l=!0,u.exports}return e.m=r,e.c=t,e.d=function(r,t,n){e.o(r,t)||Object.defineProperty(r,t,{enumerable:!0,get:n})},e.r=function(r){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},e.t=function(r,t){if(1&t&&(r=e(r)),8&t)return r;if(4&t&&"object"==typeof r&&r&&r.__esModule)return r;var n=Object.create(null);if(e.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:r}),2&t&&"string"!=typeof r)for(var u in r)e.d(n,u,function(t){return r[t]}.bind(null,u));return n},e.n=function(r){var t=r&&r.__esModule?function(){return r.default}:function(){return r};return e.d(t,"a",t),t},e.o=function(r,t){return Object.prototype.hasOwnProperty.call(r,t)},e.p="",e(e.s=1)}([function(r,t){r.exports=require("react")},function(r,t,e){"use strict";e.r(t),e.d(t,"useElapsedTime",(function(){return i}));var n=e(0);function u(r,t){return function(r){if(Array.isArray(r))return r}(r)||function(r,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(r)))return;var e=[],n=!0,u=!1,o=void 0;try{for(var i,c=r[Symbol.iterator]();!(n=(i=c.next()).done)&&(e.push(i.value),!t||e.length!==t);n=!0);}catch(r){u=!0,o=r}finally{try{n||null==c.return||c.return()}finally{if(u)throw o}}return e}(r,t)||function(r,t){if(!r)return;if("string"==typeof r)return o(r,t);var e=Object.prototype.toString.call(r).slice(8,-1);"Object"===e&&r.constructor&&(e=r.constructor.name);if("Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return o(r,t)}(r,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(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=new Array(t);e<t;e++)n[e]=r[e];return n}var i=function(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},e=t.durationMilliseconds,o=t.onComplete,i=t.startAt,c="number"==typeof e,a=Object(n.useState)(i||0),l=u(a,2),f=l[0],s=l[1],d=Object(n.useRef)(null),y=Object(n.useRef)(null),m=function r(t){if(null===y.current)return y.current=t,void(d.current=requestAnimationFrame(r));s((function(n){var i=n+(t-y.current);if(!c||i<e)return y.current=t,d.current=requestAnimationFrame(r),i;if("function"==typeof o){var a=u(o()||[],2),l=a[0],f=void 0!==l&&l,m=a[1];f&&setTimeout((function(){s(0),y.current=null,d.current=requestAnimationFrame(r)}),void 0===m?0:m)}return e}))};return Object(n.useLayoutEffect)((function(){return r&&(d.current=requestAnimationFrame(m)),function(){cancelAnimationFrame(d.current),y.current=null,d.current=null}}),[r]),f}}]);
+module.exports=function(r){var e={};function t(n){if(e[n])return e[n].exports;var u=e[n]={i:n,l:!1,exports:{}};return r[n].call(u.exports,u,u.exports,t),u.l=!0,u.exports}return t.m=r,t.c=e,t.d=function(r,e,n){t.o(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:n})},t.r=function(r){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},t.t=function(r,e){if(1&e&&(r=t(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var u in r)t.d(n,u,function(e){return r[e]}.bind(null,u));return n},t.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(e,"a",e),e},t.o=function(r,e){return Object.prototype.hasOwnProperty.call(r,e)},t.p="",t(t.s=1)}([function(r,e){r.exports=require("react")},function(r,e,t){"use strict";t.r(e),t.d(e,"useElapsedTime",(function(){return i}));var n=t(0);function u(r,e){return function(r){if(Array.isArray(r))return r}(r)||function(r,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(r)))return;var t=[],n=!0,u=!1,o=void 0;try{for(var i,c=r[Symbol.iterator]();!(n=(i=c.next()).done)&&(t.push(i.value),!e||t.length!==e);n=!0);}catch(r){u=!0,o=r}finally{try{n||null==c.return||c.return()}finally{if(u)throw o}}return t}(r,e)||function(r,e){if(!r)return;if("string"==typeof r)return o(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);"Object"===t&&r.constructor&&(t=r.constructor.name);if("Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(r,e)}(r,e)||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(r,e){(null==e||e>r.length)&&(e=r.length);for(var t=0,n=new Array(e);t<e;t++)n[t]=r[t];return n}var i=function(r){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=e.durationMilliseconds,o=e.onComplete,i=e.startAt,c=void 0===i?0:i,a="number"==typeof t,f=Object(n.useState)(c),l=u(f,2),s=l[0],d=l[1],m=Object(n.useRef)(-1*c),y=Object(n.useRef)(null),b=Object(n.useRef)(null),p=Object(n.useRef)(null);Object(n.useEffect)((function(){return function(){null!==p.current&&clearTimeout(p.current)}}),[]);var v=function r(e){if(null===b.current)return b.current=e,void(y.current=requestAnimationFrame(r));d((function(n){var i=n+(e-b.current);if(!a||i<t)return b.current=e,y.current=requestAnimationFrame(r),i;if("function"==typeof o){m.current+=t;var c=u(o(m.current)||[],2),f=c[0],l=void 0!==f&&f,s=c[1],v=void 0===s?0:s;l&&(p.current=setTimeout((function(){d(0),b.current=null,y.current=requestAnimationFrame(r)}),v))}return t}))};return Object(n.useLayoutEffect)((function(){return r&&(y.current=requestAnimationFrame(v)),function(){cancelAnimationFrame(y.current),b.current=null,y.current=null}}),[r]),s}}]);

package.json

 {
   "name": "use-elapsed-time",
-  "version": "1.1.6",
-  "description": "React hook to get the elapsed time in an animation using requestAnimationFrame",
+  "version": "1.2.0",
+  "description": "React hook to measure elapsed time using requestAnimationFrame",
   "main": "./lib/index.js",
@@ -15,3 +15,5 @@ "files": [
     "test": "jest --config jestconfig.json",
-    "test-watch": "jest --watch"
+    "test-watch": "jest --watch",
+    "dev:push": "yarn build && yalc push",
+    "prepublish": "yarn build"
   },
@@ -23,7 +25,9 @@ "repository": {
   "keywords": [
-    "React",
+    "react",
+    "hook",
     "hooks",
     "requestAnimationFrame",
     "animation",
-    "loop"
+    "loop",
+    "time"
   ],
@@ -37,4 +41,3 @@ "author": "Vasil Dimitrov",
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": ">=16.8.0"
   },
@@ -50,3 +53,3 @@ "devDependencies": {
     "install-peers-cli": "^2.1.1",
-    "jest": "^24.9.0",
+    "jest": "^25.4.0",
     "path": "^0.12.7",
@@ -53,0 +56,0 @@ "raf-stub": "^3.0.0",

README.md

 # useElapsedTime React hook
+
 [![npm](https://img.shields.io/npm/v/use-elapsed-time)](https://www.npmjs.com/package/use-elapsed-time)
@@ -7,13 +8,18 @@ [![npm](https://img.shields.io/npm/dw/use-elapsed-time)](https://www.npmjs.com/package/use-elapsed-time)
 
-The only hook you need to perform JavaScript animations in React.
+React hook to measure elapsed time using `requestAnimationFrame`. The time measurement can be played and paused, additionally the start time and duration can be set. The primary use case of the hooks is in animations where the most important part of the animation is time.
 
-* Toggle play/pause
-* Combine with [any easing function](http://www.gizma.com/easing/#l) to get the right animation
-* Built-in and ready-to-use TypeScript type definitions.
+- Toggle play/pause
+- Set start time and duration
+- Easily repeat the measurement
+- Combine with [any easing function](http://www.gizma.com/easing/#l) to get the right animation
+- Built-in and ready-to-use TypeScript type definitions.
 
 ## Installation
+
 ```
 yarn add use-elapsed-time
 ```
+
 or
+
 ```
@@ -24,4 +30,5 @@ npm install use-elapsed-time
 ## Basic usage
+
 ```jsx
-import { useElapsedTime } from 'use-elapsed-time';
+import { useElapsedTime } from "use-elapsed-time";
 
@@ -31,9 +38,11 @@ const MyComponent = () => {
   const elapsedTime = useElapsedTime(isPlaying);
-  
+
   return elapsedTime;
 };
 ```
+
 [Basic usage demo](https://codesandbox.io/s/epic-dream-hn62k)
 
 ## Function signature
+
 ```js
@@ -45,3 +54,3 @@ function useElapsedTime(
       durationMilliseconds: number,
-      onComplete?: () => undefined | [shouldRepeat: boolean, delay: number]
+      onComplete?: (totalElapsedTime: number) => void | [shouldRepeat: boolean, delay: number]
     }
@@ -52,16 +61,15 @@ ): number;
 The first argument `isPlaying` indicates if the loop to get the elapsed time is running or it is paused.
-The second argument `config` is optional. `durationMilliseconds` option set the animation duration in milliseconds. `onComplete` callback will be fired when the duration is reached. `onComplete` can be used to restart the elapsed time loop by returning an array where the first element `shouldRepeat` indicates if the loop should start over and second element `delay` specifies the delay before looping again in milliseconds. `startAt` option can shift the start time to a different value than 0. `{ durationMilliseconds: 5000, startAt: 2000 }` will return the elapsed time from 2000 to 5000 milliseconds. 
+The second argument `config` is optional. `durationMilliseconds` option set the animation duration in milliseconds. `onComplete` callback will be fired when the duration is reached. The callback will receive as an argument the `totalElapsedTime`, which could be useful when we repeat the animation. `onComplete` can be used to restart the elapsed time loop by returning an array where the first element `shouldRepeat` indicates if the loop should start over and second element `delay` specifies the delay before looping again in milliseconds. `startAt` option can shift the start time to a different value than 0. `{ durationMilliseconds: 5000, startAt: 2000 }` will return the elapsed time from 2000 to 5000 milliseconds.
 
-The hook returns elapsed time in milliseconds.  
+The hook returns elapsed time in milliseconds.
 
 ## Use cases
+
 Countdown timer  
 [![Edit priceless-hill-2tbiq](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/priceless-hill-2tbiq?fontsize=14&hidenavigation=1&theme=dark)
 
-
 Count up animation  
 [![Edit hungry-cray-hl6wn](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/hungry-cray-hl6wn?fontsize=14&hidenavigation=1&theme=dark)
 
-
 Non-liner path animation  
 [![Edit inspiring-austin-d6ol6](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/inspiring-austin-d6ol6?fontsize=14&hidenavigation=1&theme=dark)

types/use-elapsed-time.d.ts

 /** Optional configuration object */
 export interface Config {
-    /** Animation duration in milliseconds */
-    durationMilliseconds?: number,
-    
-    /** Start the animation at provided time in milliseconds. Defaults to 0 if not provided */
-    startAt?: number,
+  /** Animation duration in milliseconds */
+  durationMilliseconds?: number;
 
-    /** 
-     * On animation complete event handler. It can be used to restart the animation by returning an array
-     * where the first element "shouldRepeat" indicates if the loop should start over
-     * and second element "delay" specifies the delay before looping again in milliseconds.
-     * 
-     */
-    onComplete?: () => undefined | [boolean, number] // [shouldRepeat: boolean, delay: number]
+  /** Start the animation at provided time in milliseconds. Defaults to 0 if not provided */
+  startAt?: number;
+
+  /**
+   * On animation complete event handler. It can be used to restart the animation by returning an array
+   * where the first element "shouldRepeat" indicates if the loop should start over
+   * and second element "delay" specifies the delay before looping again in milliseconds.
+   *
+   */
+  onComplete?: (totalElapsedTime: number) => void | [boolean, number]; // [shouldRepeat: boolean, delay: number]
 }
 
-export function useElapsedTime(
-    isPlaying: boolean,
-    config?: Config
-): number;
+export function useElapsedTime(isPlaying: boolean, config?: Config): number;

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

9363

increased by7.57%

Dependency count

1

decreased by-50%

Number of lines in readme file

71

increased by12.7%

Worsened metrics

Lines of code

15

decreased by-11.76%

No dependency changes