use-elapsed-time - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

babel.config.js

@@ -0,0 +0,0 @@ module.exports = (api) => {

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 o}));var n=r(0);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(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(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.durationMilliseconds,o=t.onComplete,i=t.isRepeated,c=Object(n.useState)(0),a=u(c,2),f=a[0],l=a[1],s=Object(n.useRef)(),d=Object(n.useRef)(),p=function e(t){var n=!1;if(void 0!==d.current){var u=t-d.current;l((function(e){var t=e+u;return(n=t>=r)?r:t}))}n?("function"==typeof o&&o(),i&&(l(0),d.current=void 0,s.current=requestAnimationFrame(e))):(d.current=t,s.current=requestAnimationFrame(e))};return Object(n.useLayoutEffect)((function(){return e&&(s.current=requestAnimationFrame(p)),function(){cancelAnimationFrame(s.current),d.current=void 0,s.current=void 0}}),[e]),f}}]);
+module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.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 o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));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 u}));var n=r(0);function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,u=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){o=!0,u=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw u}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var u=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.durationMilliseconds,u=t.onComplete,i=Object(n.useState)(0),c=o(i,2),a=c[0],f=c[1],l=Object(n.useRef)(),s=Object(n.useRef)(),d=function e(t){var n=!1;if(void 0!==s.current){var i=t-s.current;f((function(e){var t=e+i;return(n=t>=r)?r:t}))}if(n){if("function"==typeof u){var c=o(u()||[],2),a=c[0],d=void 0!==a&&a,v=c[1];d&&setTimeout((function(){f(0),s.current=void 0,l.current=requestAnimationFrame(e)}),void 0===v?0:v)}}else s.current=t,l.current=requestAnimationFrame(e)};return Object(n.useLayoutEffect)((function(){return e&&(l.current=requestAnimationFrame(d)),function(){cancelAnimationFrame(l.current),s.current=void 0,l.current=void 0}}),[e]),a}}]);

package.json

 {
   "name": "use-elapsed-time",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "React hook to get the elapsed time in an animation using requestAnimationFrame",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -19,3 +19,3 @@ # useElapsedTime React hook
 ## Basic usage
-```
+```jsx
 import { useElapsedTime } from 'use-elapsed-time';
@@ -33,9 +33,8 @@
 ## Function signature
-```
-  const useElapsedTime = (
+```js
+  function useElapsedTime(
     isPlaying: boolean,
     config?: {
       durationMilliseconds: number,
-      onComplete?: () => void,
-      isRepeated?: boolean
+      onComplete?: () => undefined | [shouldRepeat: boolean, delay: number]
     }
@@ -46,3 +45,4 @@ ): 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 and it makes sense when the animation duration `durationMilliseconds` is defined. `onComplete` callback will be fired when the duration is reached. If `isRepeated` is set, the elapsed time loop will start over once the duration is reached.
+The second argument `config` is optional and it makes sense when the animation duration `durationMilliseconds` is defined. `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.  
+
 The hook returns elapsed time in milliseconds.  
@@ -52,3 +52,3 @@
 ### Countdown timer
-```
+```jsx
 import { useElapsedTime } from 'use-elapsed-time';
@@ -70,3 +70,3 @@
 ### Count Up
-```
+```jsx
 import { useElapsedTime } from 'use-elapsed-time';
@@ -94,3 +94,3 @@
 ### Non-liner path animation
-```
+```jsx
 import { useElapsedTime } from 'use-elapsed-time';
@@ -107,3 +107,3 @@
 const durationMilliseconds = 4000;
-const config = { durationMilliseconds, isRepeated: true };
+const config = { durationMilliseconds, onComplete: () => true };
 
@@ -110,0 +110,0 @@ const BounceAnimation = () => {

src/index.js

 import { useLayoutEffect, useState, useRef } from 'react';
 
 const useElapsedTime = (isPlaying, config = {}) => {
-  const {
-    durationMilliseconds,
-    onComplete,
-    isRepeated
-  } = config;
+  const { durationMilliseconds, onComplete } = config;
   const [elapsedTime, setElapsedTime] = useState(0);
@@ -26,12 +22,14 @@ const requestRef = useRef();
     }
-
+    
     if (isCompleted) {
       if (typeof onComplete === 'function') {
-        onComplete();
-      }
+        const [shouldRepeat = false, delay = 0] = onComplete() || [];
 
-      if (isRepeated) {
-        setElapsedTime(0);
-        previousTimeRef.current = undefined;
-        requestRef.current = requestAnimationFrame(loop);
+        if (shouldRepeat) {
+          setTimeout(() => {
+            setElapsedTime(0);
+            previousTimeRef.current = undefined;
+            requestRef.current = requestAnimationFrame(loop);
+          }, delay);
+        }
       }
@@ -38,0 +36,0 @@ } else {

webpack.config.js

@@ -0,0 +0,0 @@ const path = require('path');

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

Worsened metrics

Total package byte prevSize

146012

decreased by-45.08%

Number of package files

7

decreased by-12.5%

Lines of code

84

decreased by-2.33%

No dependency changes