@tanem/react-nprogress - npm Package Compare versions

Comparing version 4.0.0-beta.2 to 4.0.0-beta.3

dist/react-nprogress.cjs.development.js

@@ -42,18 +42,2 @@ 'use strict';
 
-var increment = function increment(progress) {
-  var amount = 0;
-
-  if (progress >= 0 && progress < 0.2) {
-    amount = 0.1;
-  } else if (progress >= 0.2 && progress < 0.5) {
-    amount = 0.04;
-  } else if (progress >= 0.5 && progress < 0.8) {
-    amount = 0.02;
-  } else if (progress >= 0.8 && progress < 0.99) {
-    amount = 0.005;
-  }
-
-  return clamp(progress + amount, 0, 0.994);
-};
-
 var createQueue = function createQueue() {
@@ -79,3 +63,3 @@ var isRunning = false;
 
-  var queue = function queue(cb) {
+  var enqueue = function enqueue(cb) {
     pending.push(cb);
@@ -90,3 +74,3 @@
     clear: clear,
-    queue: queue
+    enqueue: enqueue
   };
@@ -99,4 +83,2 @@ };
   var cancel = function cancel() {
-    console.log('cancel');
-
     if (handle) {
@@ -107,3 +89,3 @@ window.cancelAnimationFrame(handle);
 
-  var timeout = function timeout(callback, delay) {
+  var schedule = function schedule(callback, delay) {
     var deltaTime;
@@ -129,6 +111,22 @@ var start;
     cancel: cancel,
-    timeout: timeout
+    schedule: schedule
   };
 };
 
+var increment = function increment(progress) {
+  var amount = 0;
+
+  if (progress >= 0 && progress < 0.2) {
+    amount = 0.1;
+  } else if (progress >= 0.2 && progress < 0.5) {
+    amount = 0.04;
+  } else if (progress >= 0.5 && progress < 0.8) {
+    amount = 0.02;
+  } else if (progress >= 0.8 && progress < 0.99) {
+    amount = 0.005;
+  }
+
+  return clamp(progress + amount, 0, 0.994);
+};
+
 /* istanbul ignore next */
@@ -138,13 +136,9 @@
   return undefined;
-}; // const initialState: State = {
-//   isFinished: true,
-//   progress: 0,
-//   sideEffect: noop,
-// }
-// const cleanup = () => {
-//   cancelCurrentTimeout()
-//   clearQueue()
-// }
+};
 
-
+var initialState = {
+  isFinished: true,
+  progress: 0,
+  sideEffect: noop
+};
 var useNProgress = function useNProgress(_temp) {
@@ -161,8 +155,2 @@ var _ref = _temp === void 0 ? {} : _temp,
 
-  var initialState = {
-    isFinished: true,
-    progress: 0,
-    sideEffect: noop
-  };
-
   var _useGetSetState = reactUse.useGetSetState(initialState),
@@ -172,29 +160,34 @@ get = _useGetSetState[0],
 
-  var _createQueue = createQueue(),
-      clearQueue = _createQueue.clear,
-      queue = _createQueue.queue;
+  var queue = React.useRef(null);
+  var timeout = React.useRef(null);
+  reactUse.useEffectOnce(function () {
+    queue.current = createQueue();
+    timeout.current = createTimeout();
+  });
+  var cleanup = React.useCallback(function () {
+    var _timeout$current, _queue$current;
 
-  var _createTimeout = createTimeout(),
-      cancelCurrentTimeout = _createTimeout.cancel,
-      timeout = _createTimeout.timeout;
+    (_timeout$current = timeout.current) == null ? void 0 : _timeout$current.cancel();
+    (_queue$current = queue.current) == null ? void 0 : _queue$current.clear();
+  }, []);
+  var set = React.useCallback(function (n) {
+    var _queue$current4;
 
-  var cleanup = function cleanup() {
-    cancelCurrentTimeout();
-    clearQueue();
-  };
-
-  var set = React.useCallback(function (n) {
     n = clamp(n, minimum, 1);
 
     if (n === 1) {
+      var _queue$current2, _queue$current3;
+
       cleanup();
-      queue(function (next) {
+      (_queue$current2 = queue.current) == null ? void 0 : _queue$current2.enqueue(function (next) {
         setState({
           progress: n,
           sideEffect: function sideEffect() {
-            return timeout(next, animationDuration);
+            var _timeout$current2;
+
+            return (_timeout$current2 = timeout.current) == null ? void 0 : _timeout$current2.schedule(next, animationDuration);
           }
         });
       });
-      queue(function () {
+      (_queue$current3 = queue.current) == null ? void 0 : _queue$current3.enqueue(function () {
         setState({
@@ -208,3 +201,3 @@ isFinished: true,
 
-    queue(function (next) {
+    (_queue$current4 = queue.current) == null ? void 0 : _queue$current4.enqueue(function (next) {
       setState({
@@ -214,7 +207,9 @@ isFinished: false,
         sideEffect: function sideEffect() {
-          return timeout(next, animationDuration);
+          var _timeout$current3;
+
+          return (_timeout$current3 = timeout.current) == null ? void 0 : _timeout$current3.schedule(next, animationDuration);
         }
       });
     });
-  }, [animationDuration, minimum, setState]);
+  }, [animationDuration, cleanup, minimum, queue, setState, timeout]);
   var trickle = React.useCallback(function () {
@@ -225,5 +220,9 @@ set(increment(get().progress));
     var work = function work() {
+      var _queue$current5;
+
       trickle();
-      queue(function (next) {
-        timeout(function () {
+      (_queue$current5 = queue.current) == null ? void 0 : _queue$current5.enqueue(function (next) {
+        var _timeout$current4;
+
+        (_timeout$current4 = timeout.current) == null ? void 0 : _timeout$current4.schedule(function () {
           work();
@@ -236,3 +235,3 @@ next();
     work();
-  }, [incrementDuration, trickle]);
+  }, [incrementDuration, queue, timeout, trickle]);
   var savedTrickle = React.useRef(noop);
@@ -239,0 +238,0 @@ var sideEffect = get().sideEffect;

dist/react-nprogress.cjs.production.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _objectWithoutPropertiesLoose=require("@babel/runtime/helpers/objectWithoutPropertiesLoose"),_extends=require("@babel/runtime/helpers/extends"),React=require("react"),reactUse=require("react-use"),hoistNonReactStatics=require("hoist-non-react-statics");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var _objectWithoutPropertiesLoose__default=_interopDefaultLegacy(_objectWithoutPropertiesLoose),_extends__default=_interopDefaultLegacy(_extends),React__namespace=_interopNamespace(React),hoistNonReactStatics__default=_interopDefaultLegacy(hoistNonReactStatics),clamp=function(e,t,n){return e=(e=e<=n?e:n)>=t?e:t},increment=function(e){var t=0;return e>=0&&e<.2?t=.1:e>=.2&&e<.5?t=.04:e>=.5&&e<.8?t=.02:e>=.8&&e<.99&&(t=.005),clamp(e+t,0,.994)},createQueue=function(){var e=!1,t=[],n=function n(){e=!0;var r=t.shift();if(r)return r(n);e=!1};return{clear:function(){e=!1,t=[]},queue:function(r){t.push(r),e||1!==t.length||n()}}},createTimeout=function(){var e;return{cancel:function(){console.log("cancel"),e&&window.cancelAnimationFrame(e)},timeout:function(t,n){var r;e=window.requestAnimationFrame((function i(o){o-(r=r||o)>n?t():e=window.requestAnimationFrame(i)}))}}},noop=function(){},useNProgress=function(e){var t=void 0===e?{}:e,n=t.animationDuration,r=void 0===n?200:n,i=t.incrementDuration,o=void 0===i?800:i,c=t.isAnimating,u=void 0!==c&&c,s=t.minimum,a=void 0===s?.08:s,f={isFinished:!0,progress:0,sideEffect:noop},d=reactUse.useGetSetState(f),l=d[0],p=d[1],_=createQueue(),m=_.clear,g=_.queue,h=createTimeout(),b=h.cancel,v=h.timeout,P=function(){b(),m()},N=React.useCallback((function(e){if(1===(e=clamp(e,a,1)))return P(),g((function(t){p({progress:e,sideEffect:function(){return v(t,r)}})})),void g((function(){p({isFinished:!0,sideEffect:P})}));g((function(t){p({isFinished:!1,progress:e,sideEffect:function(){return v(t,r)}})}))}),[r,a,p]),R=React.useCallback((function(){N(increment(l().progress))}),[l,N]),E=React.useCallback((function(){!function e(){R(),g((function(t){v((function(){e(),t()}),o)}))}()}),[o,R]),j=React.useRef(noop),x=l().sideEffect;return React.useEffect((function(){j.current=R})),reactUse.useEffectOnce((function(){return u&&E(),P})),reactUse.useUpdateEffect((function(){l().sideEffect()}),[l,x]),reactUse.useUpdateEffect((function(){u?p(_extends__default.default({},f,{sideEffect:E})):N(1)}),[u,N,p,E]),{animationDuration:r,isFinished:l().isFinished,progress:l().progress}},_excluded=["children"],NProgress=function(e){var t=e.children,n=_objectWithoutPropertiesLoose__default.default(e,_excluded);return t(useNProgress(n))};function withNProgress(e){var t=function(t){var n=useNProgress(t);return React__namespace.createElement(e,_extends__default.default({},t,n))};return hoistNonReactStatics__default.default(t,e),t}exports.NProgress=NProgress,exports.useNProgress=useNProgress,exports.withNProgress=withNProgress;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _objectWithoutPropertiesLoose=require("@babel/runtime/helpers/objectWithoutPropertiesLoose"),_extends=require("@babel/runtime/helpers/extends"),React=require("react"),reactUse=require("react-use"),hoistNonReactStatics=require("hoist-non-react-statics");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var _objectWithoutPropertiesLoose__default=_interopDefaultLegacy(_objectWithoutPropertiesLoose),_extends__default=_interopDefaultLegacy(_extends),React__namespace=_interopNamespace(React),hoistNonReactStatics__default=_interopDefaultLegacy(hoistNonReactStatics),clamp=function(e,t,n){return e=(e=e<=n?e:n)>=t?e:t},createQueue=function(){var e=!1,t=[],n=function n(){e=!0;var r=t.shift();if(r)return r(n);e=!1};return{clear:function(){e=!1,t=[]},enqueue:function(r){t.push(r),e||1!==t.length||n()}}},createTimeout=function(){var e;return{cancel:function(){e&&window.cancelAnimationFrame(e)},schedule:function(t,n){var r;e=window.requestAnimationFrame((function u(i){i-(r=r||i)>n?t():e=window.requestAnimationFrame(u)}))}}},increment=function(e){var t=0;return e>=0&&e<.2?t=.1:e>=.2&&e<.5?t=.04:e>=.5&&e<.8?t=.02:e>=.8&&e<.99&&(t=.005),clamp(e+t,0,.994)},noop=function(){},initialState={isFinished:!0,progress:0,sideEffect:noop},useNProgress=function(e){var t=void 0===e?{}:e,n=t.animationDuration,r=void 0===n?200:n,u=t.incrementDuration,i=void 0===u?800:u,c=t.isAnimating,o=void 0!==c&&c,a=t.minimum,s=void 0===a?.08:a,f=reactUse.useGetSetState(initialState),l=f[0],d=f[1],p=React.useRef(null),_=React.useRef(null);reactUse.useEffectOnce((function(){p.current=createQueue(),_.current=createTimeout()}));var h=React.useCallback((function(){var e,t;null==(e=_.current)||e.cancel(),null==(t=p.current)||t.clear()}),[]),v=React.useCallback((function(e){var t,n,u;if(1===(e=clamp(e,s,1)))return h(),null==(n=p.current)||n.enqueue((function(t){d({progress:e,sideEffect:function(){var e;return null==(e=_.current)?void 0:e.schedule(t,r)}})})),void(null==(u=p.current)||u.enqueue((function(){d({isFinished:!0,sideEffect:h})})));null==(t=p.current)||t.enqueue((function(t){d({isFinished:!1,progress:e,sideEffect:function(){var e;return null==(e=_.current)?void 0:e.schedule(t,r)}})}))}),[r,h,s,p,d,_]),m=React.useCallback((function(){v(increment(l().progress))}),[l,v]),g=React.useCallback((function(){!function e(){var t;m(),null==(t=p.current)||t.enqueue((function(t){var n;null==(n=_.current)||n.schedule((function(){e(),t()}),i)}))}()}),[i,p,_,m]),b=React.useRef(noop),P=l().sideEffect;return React.useEffect((function(){b.current=m})),reactUse.useEffectOnce((function(){return o&&g(),h})),reactUse.useUpdateEffect((function(){l().sideEffect()}),[l,P]),reactUse.useUpdateEffect((function(){o?d(_extends__default.default({},initialState,{sideEffect:g})):v(1)}),[o,v,d,g]),{animationDuration:r,isFinished:l().isFinished,progress:l().progress}},_excluded=["children"],NProgress=function(e){var t=e.children,n=_objectWithoutPropertiesLoose__default.default(e,_excluded);return t(useNProgress(n))};function withNProgress(e){var t=function(t){var n=useNProgress(t);return React__namespace.createElement(e,_extends__default.default({},t,n))};return hoistNonReactStatics__default.default(t,e),t}exports.NProgress=NProgress,exports.useNProgress=useNProgress,exports.withNProgress=withNProgress;
 //# sourceMappingURL=react-nprogress.cjs.production.js.map

dist/react-nprogress.esm.js

 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
-import { useCallback, useRef, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { useGetSetState, useEffectOnce, useUpdateEffect } from 'react-use';
@@ -14,18 +14,2 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 
-var increment = function increment(progress) {
-  var amount = 0;
-
-  if (progress >= 0 && progress < 0.2) {
-    amount = 0.1;
-  } else if (progress >= 0.2 && progress < 0.5) {
-    amount = 0.04;
-  } else if (progress >= 0.5 && progress < 0.8) {
-    amount = 0.02;
-  } else if (progress >= 0.8 && progress < 0.99) {
-    amount = 0.005;
-  }
-
-  return clamp(progress + amount, 0, 0.994);
-};
-
 var createQueue = function createQueue() {
@@ -51,3 +35,3 @@ var isRunning = false;
 
-  var queue = function queue(cb) {
+  var enqueue = function enqueue(cb) {
     pending.push(cb);
@@ -62,3 +46,3 @@
     clear: clear,
-    queue: queue
+    enqueue: enqueue
   };
@@ -71,4 +55,2 @@ };
   var cancel = function cancel() {
-    console.log('cancel');
-
     if (handle) {
@@ -79,3 +61,3 @@ window.cancelAnimationFrame(handle);
 
-  var timeout = function timeout(callback, delay) {
+  var schedule = function schedule(callback, delay) {
     var deltaTime;
@@ -101,6 +83,22 @@ var start;
     cancel: cancel,
-    timeout: timeout
+    schedule: schedule
   };
 };
 
+var increment = function increment(progress) {
+  var amount = 0;
+
+  if (progress >= 0 && progress < 0.2) {
+    amount = 0.1;
+  } else if (progress >= 0.2 && progress < 0.5) {
+    amount = 0.04;
+  } else if (progress >= 0.5 && progress < 0.8) {
+    amount = 0.02;
+  } else if (progress >= 0.8 && progress < 0.99) {
+    amount = 0.005;
+  }
+
+  return clamp(progress + amount, 0, 0.994);
+};
+
 /* istanbul ignore next */
@@ -110,13 +108,9 @@
   return undefined;
-}; // const initialState: State = {
-//   isFinished: true,
-//   progress: 0,
-//   sideEffect: noop,
-// }
-// const cleanup = () => {
-//   cancelCurrentTimeout()
-//   clearQueue()
-// }
+};
 
-
+var initialState = {
+  isFinished: true,
+  progress: 0,
+  sideEffect: noop
+};
 var useNProgress = function useNProgress(_temp) {
@@ -133,8 +127,2 @@ var _ref = _temp === void 0 ? {} : _temp,
 
-  var initialState = {
-    isFinished: true,
-    progress: 0,
-    sideEffect: noop
-  };
-
   var _useGetSetState = useGetSetState(initialState),
@@ -144,29 +132,34 @@ get = _useGetSetState[0],
 
-  var _createQueue = createQueue(),
-      clearQueue = _createQueue.clear,
-      queue = _createQueue.queue;
+  var queue = useRef(null);
+  var timeout = useRef(null);
+  useEffectOnce(function () {
+    queue.current = createQueue();
+    timeout.current = createTimeout();
+  });
+  var cleanup = useCallback(function () {
+    var _timeout$current, _queue$current;
 
-  var _createTimeout = createTimeout(),
-      cancelCurrentTimeout = _createTimeout.cancel,
-      timeout = _createTimeout.timeout;
+    (_timeout$current = timeout.current) == null ? void 0 : _timeout$current.cancel();
+    (_queue$current = queue.current) == null ? void 0 : _queue$current.clear();
+  }, []);
+  var set = useCallback(function (n) {
+    var _queue$current4;
 
-  var cleanup = function cleanup() {
-    cancelCurrentTimeout();
-    clearQueue();
-  };
-
-  var set = useCallback(function (n) {
     n = clamp(n, minimum, 1);
 
     if (n === 1) {
+      var _queue$current2, _queue$current3;
+
       cleanup();
-      queue(function (next) {
+      (_queue$current2 = queue.current) == null ? void 0 : _queue$current2.enqueue(function (next) {
         setState({
           progress: n,
           sideEffect: function sideEffect() {
-            return timeout(next, animationDuration);
+            var _timeout$current2;
+
+            return (_timeout$current2 = timeout.current) == null ? void 0 : _timeout$current2.schedule(next, animationDuration);
           }
         });
       });
-      queue(function () {
+      (_queue$current3 = queue.current) == null ? void 0 : _queue$current3.enqueue(function () {
         setState({
@@ -180,3 +173,3 @@ isFinished: true,
 
-    queue(function (next) {
+    (_queue$current4 = queue.current) == null ? void 0 : _queue$current4.enqueue(function (next) {
       setState({
@@ -186,7 +179,9 @@ isFinished: false,
         sideEffect: function sideEffect() {
-          return timeout(next, animationDuration);
+          var _timeout$current3;
+
+          return (_timeout$current3 = timeout.current) == null ? void 0 : _timeout$current3.schedule(next, animationDuration);
         }
       });
     });
-  }, [animationDuration, minimum, setState]);
+  }, [animationDuration, cleanup, minimum, queue, setState, timeout]);
   var trickle = useCallback(function () {
@@ -197,5 +192,9 @@ set(increment(get().progress));
     var work = function work() {
+      var _queue$current5;
+
       trickle();
-      queue(function (next) {
-        timeout(function () {
+      (_queue$current5 = queue.current) == null ? void 0 : _queue$current5.enqueue(function (next) {
+        var _timeout$current4;
+
+        (_timeout$current4 = timeout.current) == null ? void 0 : _timeout$current4.schedule(function () {
           work();
@@ -208,3 +207,3 @@ next();
     work();
-  }, [incrementDuration, trickle]);
+  }, [incrementDuration, queue, timeout, trickle]);
   var savedTrickle = useRef(noop);
@@ -211,0 +210,0 @@ var sideEffect = get().sideEffect;

dist/react-nprogress.umd.development.js

@@ -167,18 +167,2 @@ (function (global, factory) {
 
-	var increment = function increment(progress) {
-	  var amount = 0;
-
-	  if (progress >= 0 && progress < 0.2) {
-	    amount = 0.1;
-	  } else if (progress >= 0.2 && progress < 0.5) {
-	    amount = 0.04;
-	  } else if (progress >= 0.5 && progress < 0.8) {
-	    amount = 0.02;
-	  } else if (progress >= 0.8 && progress < 0.99) {
-	    amount = 0.005;
-	  }
-
-	  return clamp(progress + amount, 0, 0.994);
-	};
-
 	var createQueue = function createQueue() {
@@ -204,3 +188,3 @@ var isRunning = false;
 
-	  var queue = function queue(cb) {
+	  var enqueue = function enqueue(cb) {
 	    pending.push(cb);
@@ -215,3 +199,3 @@
 	    clear: clear,
-	    queue: queue
+	    enqueue: enqueue
 	  };
@@ -224,4 +208,2 @@ };
 	  var cancel = function cancel() {
-	    console.log('cancel');
-
 	    if (handle) {
@@ -232,3 +214,3 @@ window.cancelAnimationFrame(handle);
 
-	  var timeout = function timeout(callback, delay) {
+	  var schedule = function schedule(callback, delay) {
 	    var deltaTime;
@@ -254,6 +236,22 @@ var start;
 	    cancel: cancel,
-	    timeout: timeout
+	    schedule: schedule
 	  };
 	};
 
+	var increment = function increment(progress) {
+	  var amount = 0;
+
+	  if (progress >= 0 && progress < 0.2) {
+	    amount = 0.1;
+	  } else if (progress >= 0.2 && progress < 0.5) {
+	    amount = 0.04;
+	  } else if (progress >= 0.5 && progress < 0.8) {
+	    amount = 0.02;
+	  } else if (progress >= 0.8 && progress < 0.99) {
+	    amount = 0.005;
+	  }
+
+	  return clamp(progress + amount, 0, 0.994);
+	};
+
 	/* istanbul ignore next */
@@ -263,13 +261,9 @@
 	  return undefined;
-	}; // const initialState: State = {
-	//   isFinished: true,
-	//   progress: 0,
-	//   sideEffect: noop,
-	// }
-	// const cleanup = () => {
-	//   cancelCurrentTimeout()
-	//   clearQueue()
-	// }
+	};
 
-
+	var initialState = {
+	  isFinished: true,
+	  progress: 0,
+	  sideEffect: noop
+	};
 	var useNProgress = function useNProgress(_temp) {
@@ -286,8 +280,2 @@ var _ref = _temp === void 0 ? {} : _temp,
 
-	  var initialState = {
-	    isFinished: true,
-	    progress: 0,
-	    sideEffect: noop
-	  };
-
 	  var _useGetSetState = useGetSetState$1(initialState),
@@ -297,29 +285,34 @@ get = _useGetSetState[0],
 
-	  var _createQueue = createQueue(),
-	      clearQueue = _createQueue.clear,
-	      queue = _createQueue.queue;
+	  var queue = React.useRef(null);
+	  var timeout = React.useRef(null);
+	  useEffectOnce$1(function () {
+	    queue.current = createQueue();
+	    timeout.current = createTimeout();
+	  });
+	  var cleanup = React.useCallback(function () {
+	    var _timeout$current, _queue$current;
 
-	  var _createTimeout = createTimeout(),
-	      cancelCurrentTimeout = _createTimeout.cancel,
-	      timeout = _createTimeout.timeout;
+	    (_timeout$current = timeout.current) == null ? void 0 : _timeout$current.cancel();
+	    (_queue$current = queue.current) == null ? void 0 : _queue$current.clear();
+	  }, []);
+	  var set = React.useCallback(function (n) {
+	    var _queue$current4;
 
-	  var cleanup = function cleanup() {
-	    cancelCurrentTimeout();
-	    clearQueue();
-	  };
-
-	  var set = React.useCallback(function (n) {
 	    n = clamp(n, minimum, 1);
 
 	    if (n === 1) {
+	      var _queue$current2, _queue$current3;
+
 	      cleanup();
-	      queue(function (next) {
+	      (_queue$current2 = queue.current) == null ? void 0 : _queue$current2.enqueue(function (next) {
 	        setState({
 	          progress: n,
 	          sideEffect: function sideEffect() {
-	            return timeout(next, animationDuration);
+	            var _timeout$current2;
+
+	            return (_timeout$current2 = timeout.current) == null ? void 0 : _timeout$current2.schedule(next, animationDuration);
 	          }
 	        });
 	      });
-	      queue(function () {
+	      (_queue$current3 = queue.current) == null ? void 0 : _queue$current3.enqueue(function () {
 	        setState({
@@ -333,3 +326,3 @@ isFinished: true,
 
-	    queue(function (next) {
+	    (_queue$current4 = queue.current) == null ? void 0 : _queue$current4.enqueue(function (next) {
 	      setState({
@@ -339,7 +332,9 @@ isFinished: false,
 	        sideEffect: function sideEffect() {
-	          return timeout(next, animationDuration);
+	          var _timeout$current3;
+
+	          return (_timeout$current3 = timeout.current) == null ? void 0 : _timeout$current3.schedule(next, animationDuration);
 	        }
 	      });
 	    });
-	  }, [animationDuration, minimum, setState]);
+	  }, [animationDuration, cleanup, minimum, queue, setState, timeout]);
 	  var trickle = React.useCallback(function () {
@@ -350,5 +345,9 @@ set(increment(get().progress));
 	    var work = function work() {
+	      var _queue$current5;
+
 	      trickle();
-	      queue(function (next) {
-	        timeout(function () {
+	      (_queue$current5 = queue.current) == null ? void 0 : _queue$current5.enqueue(function (next) {
+	        var _timeout$current4;
+
+	        (_timeout$current4 = timeout.current) == null ? void 0 : _timeout$current4.schedule(function () {
 	          work();
@@ -361,3 +360,3 @@ next();
 	    work();
-	  }, [incrementDuration, trickle]);
+	  }, [incrementDuration, queue, timeout, trickle]);
 	  var savedTrickle = React.useRef(noop);
@@ -364,0 +363,0 @@ var sideEffect = get().sideEffect;

dist/react-nprogress.umd.production.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).NProgress={},e.React)}(this,(function(e,t){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(t);function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function i(e,t){return e(t={exports:{}},t.exports),t.exports}var c=o(i((function(e){e.exports=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t.indexOf(r=i[n])>=0||(o[r]=e[r]);return o},e.exports.__esModule=!0,e.exports.default=e.exports}))),f=i((function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},e.exports.__esModule=!0,e.exports.default=e.exports,t.apply(this,arguments)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports})),u=o(f);var s=function(e,r){var n,o=(n=t.useRef(!0)).current?(n.current=!1,!0):n.current;t.useEffect((function(){if(!o)return e()}),r)},a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)},l=function(e){return(e+1)%1e6};var p=function(e){t.useEffect(e,[])},y=function(e){void 0===e&&(e={});var r=t.useReducer(l,0)[1],n=t.useRef(a({},e));return[t.useCallback((function(){return n.current}),[]),t.useCallback((function(e){e&&(Object.assign(n.current,e),r())}),[])]},d=function(e,t,r){return e=(e=e<=r?e:r)>=t?e:t},m=function(){var e=!1,t=[],r=function r(){e=!0;var n=t.shift();if(n)return n(r);e=!1};return{clear:function(){e=!1,t=[]},queue:function(n){t.push(n),e||1!==t.length||r()}}},b=function(){},v=function(e){var r,n=void 0===e?{}:e,o=n.animationDuration,i=void 0===o?200:o,c=n.incrementDuration,f=void 0===c?800:c,a=n.isAnimating,l=void 0!==a&&a,v=n.minimum,g=void 0===v?.08:v,h={isFinished:!0,progress:0,sideEffect:b},$=y(h),x=$[0],O=$[1],S=m(),P=S.clear,j=S.queue,w={cancel:function(){console.log("cancel"),r&&window.cancelAnimationFrame(r)},timeout:function(e,t){var n;r=window.requestAnimationFrame((function o(i){i-(n=n||i)>t?e():r=window.requestAnimationFrame(o)}))}},_=w.cancel,E=w.timeout,M=function(){_(),P()},F=t.useCallback((function(e){if(1===(e=d(e,g,1)))return M(),j((function(t){O({progress:e,sideEffect:function(){return E(t,i)}})})),void j((function(){O({isFinished:!0,sideEffect:M})}));j((function(t){O({isFinished:!1,progress:e,sideEffect:function(){return E(t,i)}})}))}),[i,g,O]),C=t.useCallback((function(){var e,t;F((e=x().progress,t=0,e>=0&&e<.2?t=.1:e>=.2&&e<.5?t=.04:e>=.5&&e<.8?t=.02:e>=.8&&e<.99&&(t=.005),d(e+t,0,.994)))}),[x,F]),T=t.useCallback((function(){!function e(){C(),j((function(t){E((function(){e(),t()}),f)}))}()}),[f,C]),k=t.useRef(b),D=x().sideEffect;return t.useEffect((function(){k.current=C})),p((function(){return l&&T(),M})),s((function(){x().sideEffect()}),[x,D]),s((function(){l?O(u({},h,{sideEffect:T})):F(1)}),[l,F,O,T]),{animationDuration:i,isFinished:x().isFinished,progress:x().progress}},g=["children"],h="function"==typeof Symbol&&Symbol.for,$=h?Symbol.for("react.element"):60103,x=h?Symbol.for("react.portal"):60106,O=h?Symbol.for("react.fragment"):60107,S=h?Symbol.for("react.strict_mode"):60108,P=h?Symbol.for("react.profiler"):60114,j=h?Symbol.for("react.provider"):60109,w=h?Symbol.for("react.context"):60110,_=h?Symbol.for("react.async_mode"):60111,E=h?Symbol.for("react.concurrent_mode"):60111,M=h?Symbol.for("react.forward_ref"):60112,F=h?Symbol.for("react.suspense"):60113,C=h?Symbol.for("react.suspense_list"):60120,T=h?Symbol.for("react.memo"):60115,k=h?Symbol.for("react.lazy"):60116,D=h?Symbol.for("react.block"):60121,N=h?Symbol.for("react.fundamental"):60117,R=h?Symbol.for("react.responder"):60118,A=h?Symbol.for("react.scope"):60119;function q(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case $:switch(e=e.type){case _:case E:case O:case P:case S:case F:return e;default:switch(e=e&&e.$$typeof){case w:case M:case k:case T:case j:return e;default:return t}}case x:return t}}}function z(e){return q(e)===E}var L={AsyncMode:_,ConcurrentMode:E,ContextConsumer:w,ContextProvider:j,Element:$,ForwardRef:M,Fragment:O,Lazy:k,Memo:T,Portal:x,Profiler:P,StrictMode:S,Suspense:F,isAsyncMode:function(e){return z(e)||q(e)===_},isConcurrentMode:z,isContextConsumer:function(e){return q(e)===w},isContextProvider:function(e){return q(e)===j},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===$},isForwardRef:function(e){return q(e)===M},isFragment:function(e){return q(e)===O},isLazy:function(e){return q(e)===k},isMemo:function(e){return q(e)===T},isPortal:function(e){return q(e)===x},isProfiler:function(e){return q(e)===P},isStrictMode:function(e){return q(e)===S},isSuspense:function(e){return q(e)===F},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===O||e===E||e===P||e===S||e===F||e===C||"object"==typeof e&&null!==e&&(e.$$typeof===k||e.$$typeof===T||e.$$typeof===j||e.$$typeof===w||e.$$typeof===M||e.$$typeof===N||e.$$typeof===R||e.$$typeof===A||e.$$typeof===D)},typeOf:q},V=(i((function(e,t){})),i((function(e){e.exports=L}))),B={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},G={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},H={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},I={};function J(e){return V.isMemo(e)?H:I[e.$$typeof]||B}I[V.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},I[V.Memo]=H;var K=Object.defineProperty,Q=Object.getOwnPropertyNames,U=Object.getOwnPropertySymbols,W=Object.getOwnPropertyDescriptor,X=Object.getPrototypeOf,Y=Object.prototype;var Z=function e(t,r,n){if("string"!=typeof r){if(Y){var o=X(r);o&&o!==Y&&e(t,o,n)}var i=Q(r);U&&(i=i.concat(U(r)));for(var c=J(t),f=J(r),u=0;u<i.length;++u){var s=i[u];if(!(G[s]||n&&n[s]||f&&f[s]||c&&c[s])){var a=W(r,s);try{K(t,s,a)}catch(e){}}}}return t};e.NProgress=function(e){var t=e.children,r=c(e,g);return t(v(r))},e.useNProgress=v,e.withNProgress=function(e){var t=function(t){var r=v(t);return n.createElement(e,u({},t,r))};return Z(t,e),t},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).NProgress={},e.React)}(this,(function(e,r){"use strict";function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(r);function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function u(e,r){return e(r={exports:{}},r.exports),r.exports}var c=o(u((function(e){e.exports=function(e,r){if(null==e)return{};var t,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r.indexOf(t=u[n])>=0||(o[t]=e[t]);return o},e.exports.__esModule=!0,e.exports.default=e.exports}))),i=u((function(e){function r(){return e.exports=r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},e.exports.__esModule=!0,e.exports.default=e.exports,r.apply(this,arguments)}e.exports=r,e.exports.__esModule=!0,e.exports.default=e.exports})),f=o(i);var s=function(e,t){var n,o=(n=r.useRef(!0)).current?(n.current=!1,!0):n.current;r.useEffect((function(){if(!o)return e()}),t)},a=function(){return a=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},a.apply(this,arguments)},l=function(e){return(e+1)%1e6};var p=function(e){r.useEffect(e,[])},y=function(e){void 0===e&&(e={});var t=r.useReducer(l,0)[1],n=r.useRef(a({},e));return[r.useCallback((function(){return n.current}),[]),r.useCallback((function(e){e&&(Object.assign(n.current,e),t())}),[])]},d=function(e,r,t){return e=(e=e<=t?e:t)>=r?e:r},m=function(){var e=!1,r=[],t=function t(){e=!0;var n=r.shift();if(n)return n(t);e=!1};return{clear:function(){e=!1,r=[]},enqueue:function(n){r.push(n),e||1!==r.length||t()}}},b=function(){},v={isFinished:!0,progress:0,sideEffect:b},g=function(e){var t=void 0===e?{}:e,n=t.animationDuration,o=void 0===n?200:n,u=t.incrementDuration,c=void 0===u?800:u,i=t.isAnimating,a=void 0!==i&&i,l=t.minimum,g=void 0===l?.08:l,h=y(v),$=h[0],x=h[1],O=r.useRef(null),S=r.useRef(null);p((function(){var e;O.current=m(),S.current={cancel:function(){e&&window.cancelAnimationFrame(e)},schedule:function(r,t){var n;e=window.requestAnimationFrame((function o(u){u-(n=n||u)>t?r():e=window.requestAnimationFrame(o)}))}}}));var P=r.useCallback((function(){var e,r;null==(e=S.current)||e.cancel(),null==(r=O.current)||r.clear()}),[]),j=r.useCallback((function(e){var r,t,n;if(1===(e=d(e,g,1)))return P(),null==(t=O.current)||t.enqueue((function(r){x({progress:e,sideEffect:function(){var e;return null==(e=S.current)?void 0:e.schedule(r,o)}})})),void(null==(n=O.current)||n.enqueue((function(){x({isFinished:!0,sideEffect:P})})));null==(r=O.current)||r.enqueue((function(r){x({isFinished:!1,progress:e,sideEffect:function(){var e;return null==(e=S.current)?void 0:e.schedule(r,o)}})}))}),[o,P,g,O,x,S]),w=r.useCallback((function(){var e,r;j((e=$().progress,r=0,e>=0&&e<.2?r=.1:e>=.2&&e<.5?r=.04:e>=.5&&e<.8?r=.02:e>=.8&&e<.99&&(r=.005),d(e+r,0,.994)))}),[$,j]),_=r.useCallback((function(){!function e(){var r;w(),null==(r=O.current)||r.enqueue((function(r){var t;null==(t=S.current)||t.schedule((function(){e(),r()}),c)}))}()}),[c,O,S,w]),E=r.useRef(b),M=$().sideEffect;return r.useEffect((function(){E.current=w})),p((function(){return a&&_(),P})),s((function(){$().sideEffect()}),[$,M]),s((function(){a?x(f({},v,{sideEffect:_})):j(1)}),[a,j,x,_]),{animationDuration:o,isFinished:$().isFinished,progress:$().progress}},h=["children"],$="function"==typeof Symbol&&Symbol.for,x=$?Symbol.for("react.element"):60103,O=$?Symbol.for("react.portal"):60106,S=$?Symbol.for("react.fragment"):60107,P=$?Symbol.for("react.strict_mode"):60108,j=$?Symbol.for("react.profiler"):60114,w=$?Symbol.for("react.provider"):60109,_=$?Symbol.for("react.context"):60110,E=$?Symbol.for("react.async_mode"):60111,M=$?Symbol.for("react.concurrent_mode"):60111,C=$?Symbol.for("react.forward_ref"):60112,F=$?Symbol.for("react.suspense"):60113,R=$?Symbol.for("react.suspense_list"):60120,k=$?Symbol.for("react.memo"):60115,T=$?Symbol.for("react.lazy"):60116,q=$?Symbol.for("react.block"):60121,D=$?Symbol.for("react.fundamental"):60117,N=$?Symbol.for("react.responder"):60118,A=$?Symbol.for("react.scope"):60119;function z(e){if("object"==typeof e&&null!==e){var r=e.$$typeof;switch(r){case x:switch(e=e.type){case E:case M:case S:case j:case P:case F:return e;default:switch(e=e&&e.$$typeof){case _:case C:case T:case k:case w:return e;default:return r}}case O:return r}}}function L(e){return z(e)===M}var V={AsyncMode:E,ConcurrentMode:M,ContextConsumer:_,ContextProvider:w,Element:x,ForwardRef:C,Fragment:S,Lazy:T,Memo:k,Portal:O,Profiler:j,StrictMode:P,Suspense:F,isAsyncMode:function(e){return L(e)||z(e)===E},isConcurrentMode:L,isContextConsumer:function(e){return z(e)===_},isContextProvider:function(e){return z(e)===w},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===x},isForwardRef:function(e){return z(e)===C},isFragment:function(e){return z(e)===S},isLazy:function(e){return z(e)===T},isMemo:function(e){return z(e)===k},isPortal:function(e){return z(e)===O},isProfiler:function(e){return z(e)===j},isStrictMode:function(e){return z(e)===P},isSuspense:function(e){return z(e)===F},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===S||e===M||e===j||e===P||e===F||e===R||"object"==typeof e&&null!==e&&(e.$$typeof===T||e.$$typeof===k||e.$$typeof===w||e.$$typeof===_||e.$$typeof===C||e.$$typeof===D||e.$$typeof===N||e.$$typeof===A||e.$$typeof===q)},typeOf:z},B=(u((function(e,r){})),u((function(e){e.exports=V}))),G={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},H={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},I={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},J={};function K(e){return B.isMemo(e)?I:J[e.$$typeof]||G}J[B.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},J[B.Memo]=I;var Q=Object.defineProperty,U=Object.getOwnPropertyNames,W=Object.getOwnPropertySymbols,X=Object.getOwnPropertyDescriptor,Y=Object.getPrototypeOf,Z=Object.prototype;var ee=function e(r,t,n){if("string"!=typeof t){if(Z){var o=Y(t);o&&o!==Z&&e(r,o,n)}var u=U(t);W&&(u=u.concat(W(t)));for(var c=K(r),i=K(t),f=0;f<u.length;++f){var s=u[f];if(!(H[s]||n&&n[s]||i&&i[s]||c&&c[s])){var a=X(t,s);try{Q(r,s,a)}catch(e){}}}}return r};e.NProgress=function(e){var r=e.children,t=c(e,h);return r(g(t))},e.useNProgress=g,e.withNProgress=function(e){var r=function(r){var t=g(r);return n.createElement(e,f({},r,t))};return ee(r,e),r},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-nprogress.umd.production.js.map

dist/useNProgress.d.ts

 import { Options } from './types';
-interface ReturnType {
+export declare const useNProgress: ({ animationDuration, incrementDuration, isAnimating, minimum, }?: Options) => {
     animationDuration: number;
     isFinished: boolean;
     progress: number;
-}
-export declare const useNProgress: ({ animationDuration, incrementDuration, isAnimating, minimum, }?: Options) => ReturnType;
-export {};
+};

package.json

 {
   "name": "@tanem/react-nprogress",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.3",
   "description": "A React primitive for building slim progress bars.",
@@ -25,3 +25,3 @@ "main": "dist/index.js",
     "compile": "tsc -p tsconfig.base.json",
-    "format": "prettier --write \"**/*.{js,ts,tsx}\"",
+    "format": "npm run lint -- --fix && prettier --write \"**/*.{js,ts,tsx}\"",
     "lint": "eslint --ext js,ts,tsx .",
@@ -28,0 +28,0 @@ "postbundle": "npm run clean:compiled && shx cp ./index.js ./dist/index.js",

README.md

@@ -99,2 +99,3 @@ # react-nprogress
 - Material UI: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/material-ui) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/material-ui)
+- Multiple Instances: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/multiple-instances) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/multiple-instances)
 - Next Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/next-router) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/next-router)
@@ -101,0 +102,0 @@ - Original Design: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/original-design) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/original-design)

No alert changes

Improved metrics

Total package byte prevSize

183566

increased by2.09%

Number of lines in readme file

213

increased by0.47%

Worsened metrics

Lines of code

1144

decreased by-0.44%

No dependency changes