@tanem/react-nprogress 7.0.0 → 7.1.0

package/README.md

@@ -14,6 +14,8 @@
 
 This is a React port of [rstacruz](https://github.com/rstacruz)'s [`nprogress`](https://github.com/rstacruz/nprogress) module. It exposes an API that encapsulates the logic of `nprogress` and renders nothing, allowing consumers to implement their own rendering.
 
+Two versions of `nprogress` are in circulation and they trickle differently. The 2014 npm release, `0.2.0`, adds a random amount of at most `0.02` every 800ms. The repository's master branch, never published to npm, adds tiered amounts every 200ms. This library mirrors master, so a side by side comparison against the npm package or the official demo page will show a different pace. The [`increment`](#increment) option covers the `0.2.0` pacing if you prefer the older feel.
+
 ## When to Use This
 
 This package is a headless primitive. It renders no markup and ships no CSS, supplying only the pacing state: a `progress` value that trickles towards completion, an `isFinished` flag, and the `animationDuration` to transition with. The bar itself is yours to write.
@@ -70,6 +72,24 @@ const Progress = ({ isAnimating }) => (
 )
 ```
 
+**Restarting**
+
+Both patterns leave the bar mounted between runs, and `progress` returns to `minimum` when it starts again. A bar that transitions `margin-left` or `transform` therefore animates backwards from where it finished, in full view, before it starts trickling forward. Back to back navigations hit this every time.
+
+Change a `key` on the bar whenever it starts, so React mounts a fresh element at `minimum` instead:
+
+```jsx
+const [state, setState] = useState({ isAnimating: false, key: 0 })
+
+const start = () => {
+  setState((prevState) => ({ isAnimating: true, key: prevState.key ^ 1 }))
+}
+
+return <Progress isAnimating={state.isAnimating} key={state.key} />
+```
+
+Every entry in [Live Examples](#live-examples) does this. Dropping the transition while `isFinished` is not an alternative: `isFinished` is already `false` by the time `progress` resets, so the transition is back on for the step that moves the bar.
+
 ## API
 
 The package exports one hook and one component. Both take the same [options](#options) and produce the same [values](#return-value), so the choice between them is a matter of which pattern suits the calling code. Both shapes are exported as types, for typing code that wraps either entry point:
@@ -85,6 +105,7 @@ Returns the state of one progress bar. Call it once per bar: two calls, or two m
 ```jsx
 const { animationDuration, isFinished, progress } = useNProgress({
   animationDuration: 300,
+  increment: (progress) => progress + 0.01,
   incrementDuration: 500,
   isAnimating: true,
   minimum: 0.1,
@@ -98,6 +119,7 @@ Takes the options as props and calls `children` with the values the hook returns
 ```jsx
 <NProgress
   animationDuration={300}
+  increment={(progress) => progress + 0.01}
   incrementDuration={500}
   isAnimating
   minimum={0.1}
@@ -110,22 +132,43 @@ Takes the options as props and calls `children` with the values the hook returns
 
 ### Options
 
-All four options are optional. The type is `NProgressOptions`.
+All five options are optional. The type is `NProgressOptions`.
 
-| Option                                    | Type      | Default |
-| ----------------------------------------- | --------- | ------- |
-| [`animationDuration`](#animationduration) | `number`  | `200`   |
-| [`incrementDuration`](#incrementduration) | `number`  | `200`   |
-| [`isAnimating`](#isanimating)             | `boolean` | `false` |
-| [`minimum`](#minimum)                     | `number`  | `0.08`  |
+| Option                                    | Type                           | Default        |
+| ----------------------------------------- | ------------------------------ | -------------- |
+| [`animationDuration`](#animationduration) | `number`                       | `200`          |
+| [`increment`](#increment)                 | `(progress: number) => number` | tiered trickle |
+| [`incrementDuration`](#incrementduration) | `number`                       | `200`          |
+| [`isAnimating`](#isanimating)             | `boolean`                      | `false`        |
+| [`minimum`](#minimum)                     | `number`                       | `0.08`         |
 
 #### `animationDuration`
 
 Milliseconds the bar is given to animate out once it completes. `progress` reaches `1` as soon as `isAnimating` goes `false`, and `isFinished` follows this many milliseconds later, leaving that window for the exit transition. The value is also returned unchanged, so a single number drives both the timing and the CSS transitions.
 
+#### `increment`
+
+Size of each trickle step. The function is called with the current `progress` and returns the next value. The default is the tiered curve nprogress uses: `+0.1` below `0.2`, then `+0.04`, `+0.02`, and `+0.005` as `progress` grows, held at a ceiling of `0.994` so the bar never looks complete before it is.
+
+The return value is clamped to between `minimum` and `1`, and nothing else. A custom function therefore owns its own ceiling. Leave it short of `1`, since reaching `1` is what completion means, and let `isAnimating` going `false` take the bar the rest of the way.
+
+Returning a random amount is fine, but keep the function free of other side effects. It runs inside a React state update, and StrictMode calls it twice per increment in development. This trickles a random amount of at most `0.02` every 800ms, which is how nprogress `0.2.0` paces itself:
+
+```jsx
+const { progress } = useNProgress({
+  increment: (progress) => Math.min(progress + Math.random() * 0.02, 0.994),
+  incrementDuration: 800,
+  isAnimating,
+})
+```
+
+`0.2.0` also transitions the bar with `ease` where master uses `linear`. Easing lives in your renderer's CSS, so match it there if you want the rest of that look. The [Classic 0.2.0](https://github.com/tanem/react-nprogress/tree/master/examples/classic-020) example puts both together.
+
+A new function identity on every render is fine too: passing an inline function does not restart the trickle timer. The next increment uses the latest function.
+
 #### `incrementDuration`
 
-Milliseconds between increments while the bar is animating. It controls the trickle pacing only: the size of each increment is not configurable, and shrinks as `progress` grows.
+Milliseconds between increments while the bar is animating. It controls the trickle pacing only. Step size is [`increment`](#increment).
 
 #### `isAnimating`
 
@@ -133,7 +176,7 @@ Whether the bar is running. Going `true` starts it, going `false` completes it.
 
 #### `minimum`
 
-Lower bound for `progress`, between `0` and `1`. The first increment starts from `0.1` rather than from `0`, so the bar appears at `max(0.1, minimum)` and the option only shows through when it is set above `0.1`. Changing it while the bar is animating does not rewind the bar. Progress holds where it is, and the new bound applies from the next increment.
+Lower bound for `progress`, between `0` and `1`. The bar first appears at this value, then trickles up from there. Changing it while the bar is animating does not rewind the bar. Progress holds where it is, and the new bound applies from the next increment.
 
 ### Return Value
 
@@ -143,12 +186,13 @@ Lower bound for `progress`, between `0` and `1`. The first increment starts from
 | ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `animationDuration` | `number`  | The `animationDuration` option, passed through so rendering code can transition with it.                                                                      |
 | `isFinished`        | `boolean` | `true` before the bar starts and again once it has animated out. `false` from when `isAnimating` goes `true` until `animationDuration` after it goes `false`. |
-| `progress`          | `number`  | Starts at `0` and trickles up in shrinking steps to a ceiling of `0.994`, then goes to `1` on completion.                                                     |
+| `progress`          | `number`  | Starts at `0`, appears at `minimum` when the bar starts, then trickles up by [`increment`](#increment) and goes to `1` on completion.                         |
 
 ## Live Examples
 
 | Example                                                                                                | Sandbox                                                                                                      |
 | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
+| [Classic 0.2.0](https://github.com/tanem/react-nprogress/tree/master/examples/classic-020)             | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/classic-020)        |
 | [Material UI](https://github.com/tanem/react-nprogress/tree/master/examples/material-ui)               | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/material-ui)        |
 | [Multiple Instances](https://github.com/tanem/react-nprogress/tree/master/examples/multiple-instances) | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/multiple-instances) |
 | [Next App Router](https://github.com/tanem/react-nprogress/tree/master/examples/next-app-router)       | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/next-app-router)    |

package/dist/react-nprogress.cjs

@@ -62,16 +62,20 @@ const reducer = (state, action) => {
 		};
 		case "start": return state.phase === "animating" ? state : {
 			phase: "animating",
-			progress: clamp(increment(0), action.minimum, 1)
+			progress: clamp(0, action.minimum, 1)
 		};
 		case "trickle": return {
 			...state,
-			progress: clamp(increment(state.progress), action.minimum, 1)
+			progress: clamp(action.increment(state.progress), action.minimum, 1)
 		};
 	}
 };
-const useNProgress = ({ animationDuration = 200, incrementDuration = 200, isAnimating = false, minimum = .08 } = {}) => {
+const useNProgress = ({ animationDuration = 200, increment: increment$1 = increment, incrementDuration = 200, isAnimating = false, minimum = .08 } = {}) => {
 	const [{ phase, progress }, dispatch] = (0, react.useReducer)(reducer, initialState);
+	const incrementRef = (0, react.useRef)(increment$1);
+	(0, react.useEffect)(() => {
+		incrementRef.current = increment$1;
+	});
 	(0, react.useEffect)(() => {
 		dispatch(isAnimating ? {
 			minimum,
@@ -83,6 +87,7 @@ const useNProgress = ({ animationDuration = 200, incrementDuration = 200, isAnim
 		const timeout = createTimeout();
 		const trickle = () => {
 			dispatch({
+				increment: incrementRef.current,
 				minimum,
 				type: "trickle"
 			});

package/dist/react-nprogress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"react-nprogress.cjs","names":["useReducer"],"sources":["../src/clamp.ts","../src/createTimeout.ts","../src/increment.ts","../src/useNProgress.tsx","../src/NProgress.tsx"],"sourcesContent":["export const clamp = (num: number, lower: number, upper: number): number => {\n  num = num <= upper ? num : upper\n  num = num >= lower ? num : lower\n  return num\n}\n","// Uses requestAnimationFrame rather than setTimeout for smoother animation\n// timing. Note that rAF is throttled or paused in background tabs, so progress\n// will stall when the tab is hidden and resume when it regains focus.\nexport const createTimeout = () => {\n  let handle: number | undefined\n\n  const cancel = (): void => {\n    if (handle !== undefined) {\n      window.cancelAnimationFrame(handle)\n    }\n  }\n\n  const schedule = (callback: () => void, delay: number): void => {\n    cancel()\n\n    let deltaTime\n    let start: number | undefined\n    const frame: FrameRequestCallback = (time) => {\n      start = start || time\n      deltaTime = time - start\n      if (deltaTime > delay) {\n        callback()\n        return\n      }\n      handle = window.requestAnimationFrame(frame)\n    }\n\n    handle = window.requestAnimationFrame(frame)\n  }\n\n  return {\n    cancel,\n    schedule,\n  }\n}\n","import { clamp } from './clamp'\n\nexport const increment = (progress: number): number => {\n  let amount = 0\n\n  if (progress >= 0 && progress < 0.2) {\n    amount = 0.1\n  } else if (progress >= 0.2 && progress < 0.5) {\n    amount = 0.04\n  } else if (progress >= 0.5 && progress < 0.8) {\n    amount = 0.02\n  } else if (progress >= 0.8 && progress < 0.99) {\n    amount = 0.005\n  }\n\n  return clamp(progress + amount, 0, 0.994)\n}\n","import { useEffect, useReducer } from 'react'\n\nimport { clamp } from './clamp'\nimport { createTimeout } from './createTimeout'\nimport { increment } from './increment'\nimport type { NProgressOptions, NProgressState } from './types'\n\n// A four-phase state machine. `idle` and `finished` both report\n// `isFinished: true` and differ only in the progress they hold, so the phase,\n// not `isFinished`, is what decides which transitions and timers apply.\ntype Phase = 'animating' | 'completing' | 'finished' | 'idle'\n\ninterface State {\n  phase: Phase\n  progress: number\n}\n\ntype Action =\n  | { minimum: number; type: 'start' }\n  | { minimum: number; type: 'trickle' }\n  | { type: 'complete' }\n  | { type: 'finish' }\n\nconst initialState: State = {\n  phase: 'idle',\n  progress: 0,\n}\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case 'complete':\n      // Unlike the original nprogress `done()`, completion does not include a\n      // random progress jump before animating to 1. This keeps the primitive\n      // predictable; consumers can set a higher progress value before stopping\n      // the animation if they want that effect.\n      //\n      // Ignored unless an animation is actually running, which is what makes a\n      // StrictMode double-mount a no-op rather than a spurious completion.\n      return state.phase === 'animating'\n        ? { phase: 'completing', progress: 1 }\n        : state\n\n    case 'finish':\n      return { phase: 'finished', progress: 1 }\n\n    case 'start':\n      // The original nprogress calls set(0) - which clamps to `minimum` -\n      // before the first trickle. Here, the first trickle starts from\n      // increment(0) = 0.1, so the bar appears at max(0.1, minimum) rather\n      // than exactly `minimum`. The difference is negligible at the default\n      // minimum of 0.08.\n      //\n      // Guarded the same way as `complete`, and for the same reason: a repeat\n      // dispatch against a running animation must not rewind the bar. That\n      // happens whenever `minimum` changes mid-animation, as well as on a\n      // StrictMode double-mount.\n      return state.phase === 'animating'\n        ? state\n        : {\n            phase: 'animating',\n            progress: clamp(increment(0), action.minimum, 1),\n          }\n\n    case 'trickle':\n      return {\n        ...state,\n        progress: clamp(increment(state.progress), action.minimum, 1),\n      }\n  }\n}\n\nexport const useNProgress = ({\n  animationDuration = 200,\n  incrementDuration = 200,\n  isAnimating = false,\n  minimum = 0.08,\n}: NProgressOptions = {}): NProgressState => {\n  const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)\n\n  useEffect(() => {\n    dispatch(isAnimating ? { minimum, type: 'start' } : { type: 'complete' })\n  }, [isAnimating, minimum])\n\n  // A timer per running phase, rather than one effect branching over both.\n  // Each then depends only on the options its own phase reads, so changing an\n  // option the running phase ignores cannot cancel its timer. Both are keyed\n  // on the phase rather than on progress, so trickling does not tear down and\n  // recreate the timer mid-animation.\n  useEffect(() => {\n    if (phase !== 'animating') {\n      return\n    }\n\n    const timeout = createTimeout()\n\n    const trickle = () => {\n      dispatch({ minimum, type: 'trickle' })\n      timeout.schedule(trickle, incrementDuration)\n    }\n    timeout.schedule(trickle, incrementDuration)\n\n    return () => timeout.cancel()\n  }, [incrementDuration, minimum, phase])\n\n  useEffect(() => {\n    if (phase !== 'completing') {\n      return\n    }\n\n    const timeout = createTimeout()\n    timeout.schedule(() => dispatch({ type: 'finish' }), animationDuration)\n\n    return () => timeout.cancel()\n  }, [animationDuration, phase])\n\n  return {\n    animationDuration,\n    isFinished: phase === 'finished' || phase === 'idle',\n    progress,\n  }\n}\n","import type { FC, ReactElement } from 'react'\n\nimport type { NProgressOptions, NProgressState } from './types'\nimport { useNProgress } from './useNProgress'\n\ntype Props = NProgressOptions & {\n  children: (renderProps: NProgressState) => ReactElement\n}\n\nexport const NProgress: FC<Props> = ({ children, ...restProps }: Props) => {\n  const renderProps = useNProgress(restProps)\n  return children(renderProps)\n}\n"],"mappings":";;;;AAAA,MAAa,SAAS,KAAa,OAAe,UAA0B;CAC1E,MAAM,OAAO,QAAQ,MAAM;CAC3B,MAAM,OAAO,QAAQ,MAAM;CAC3B,OAAO;AACT;;;ACDA,MAAa,sBAAsB;CACjC,IAAI;CAEJ,MAAM,eAAqB;EACzB,IAAI,WAAW,KAAA,GACb,OAAO,qBAAqB,MAAM;CAEtC;CAEA,MAAM,YAAY,UAAsB,UAAwB;EAC9D,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,MAAM,SAA+B,SAAS;GAC5C,QAAQ,SAAS;GACjB,YAAY,OAAO;GACnB,IAAI,YAAY,OAAO;IACrB,SAAS;IACT;GACF;GACA,SAAS,OAAO,sBAAsB,KAAK;EAC7C;EAEA,SAAS,OAAO,sBAAsB,KAAK;CAC7C;CAEA,OAAO;EACL;EACA;CACF;AACF;;;AChCA,MAAa,aAAa,aAA6B;CACrD,IAAI,SAAS;CAEb,IAAI,YAAY,KAAK,WAAW,IAC9B,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,KACvC,SAAS;CAGX,OAAO,MAAM,WAAW,QAAQ,GAAG,IAAK;AAC1C;;;ACOA,MAAM,eAAsB;CAC1B,OAAO;CACP,UAAU;AACZ;AAEA,MAAM,WAAW,OAAc,WAA0B;CACvD,QAAQ,OAAO,MAAf;EACE,KAAK,YAQH,OAAO,MAAM,UAAU,cACnB;GAAE,OAAO;GAAc,UAAU;EAAE,IACnC;EAEN,KAAK,UACH,OAAO;GAAE,OAAO;GAAY,UAAU;EAAE;EAE1C,KAAK,SAWH,OAAO,MAAM,UAAU,cACnB,QACA;GACE,OAAO;GACP,UAAU,MAAM,UAAU,CAAC,GAAG,OAAO,SAAS,CAAC;EACjD;EAEN,KAAK,WACH,OAAO;GACL,GAAG;GACH,UAAU,MAAM,UAAU,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC;EAC9D;CACJ;AACF;AAEA,MAAa,gBAAgB,EAC3B,oBAAoB,KACpB,oBAAoB,KACpB,cAAc,OACd,UAAU,QACU,CAAC,MAAsB;CAC3C,MAAM,CAAC,EAAE,OAAO,YAAY,aAAA,GAAYA,MAAAA,WAAAA,CAAW,SAAS,YAAY;CAExE,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,SAAS,cAAc;GAAE;GAAS,MAAM;EAAQ,IAAI,EAAE,MAAM,WAAW,CAAC;CAC1E,GAAG,CAAC,aAAa,OAAO,CAAC;CAOzB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,UAAU,aACZ;EAGF,MAAM,UAAU,cAAc;EAE9B,MAAM,gBAAgB;GACpB,SAAS;IAAE;IAAS,MAAM;GAAU,CAAC;GACrC,QAAQ,SAAS,SAAS,iBAAiB;EAC7C;EACA,QAAQ,SAAS,SAAS,iBAAiB;EAE3C,aAAa,QAAQ,OAAO;CAC9B,GAAG;EAAC;EAAmB;EAAS;CAAK,CAAC;CAEtC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,UAAU,cACZ;EAGF,MAAM,UAAU,cAAc;EAC9B,QAAQ,eAAe,SAAS,EAAE,MAAM,SAAS,CAAC,GAAG,iBAAiB;EAEtE,aAAa,QAAQ,OAAO;CAC9B,GAAG,CAAC,mBAAmB,KAAK,CAAC;CAE7B,OAAO;EACL;EACA,YAAY,UAAU,cAAc,UAAU;EAC9C;CACF;AACF;;;AC/GA,MAAa,aAAwB,EAAE,UAAU,GAAG,gBAAuB;CAEzE,OAAO,SADa,aAAa,SACP,CAAC;AAC7B"}
+{"version":3,"file":"react-nprogress.cjs","names":["defaultIncrement","useReducer","useRef","increment"],"sources":["../src/clamp.ts","../src/createTimeout.ts","../src/increment.ts","../src/useNProgress.tsx","../src/NProgress.tsx"],"sourcesContent":["export const clamp = (num: number, lower: number, upper: number): number => {\n  num = num <= upper ? num : upper\n  num = num >= lower ? num : lower\n  return num\n}\n","// Uses requestAnimationFrame rather than setTimeout for smoother animation\n// timing. Note that rAF is throttled or paused in background tabs, so progress\n// will stall when the tab is hidden and resume when it regains focus.\nexport const createTimeout = () => {\n  let handle: number | undefined\n\n  const cancel = (): void => {\n    if (handle !== undefined) {\n      window.cancelAnimationFrame(handle)\n    }\n  }\n\n  const schedule = (callback: () => void, delay: number): void => {\n    cancel()\n\n    let deltaTime\n    let start: number | undefined\n    const frame: FrameRequestCallback = (time) => {\n      start = start || time\n      deltaTime = time - start\n      if (deltaTime > delay) {\n        callback()\n        return\n      }\n      handle = window.requestAnimationFrame(frame)\n    }\n\n    handle = window.requestAnimationFrame(frame)\n  }\n\n  return {\n    cancel,\n    schedule,\n  }\n}\n","import { clamp } from './clamp'\n\nexport const increment = (progress: number): number => {\n  let amount = 0\n\n  if (progress >= 0 && progress < 0.2) {\n    amount = 0.1\n  } else if (progress >= 0.2 && progress < 0.5) {\n    amount = 0.04\n  } else if (progress >= 0.5 && progress < 0.8) {\n    amount = 0.02\n  } else if (progress >= 0.8 && progress < 0.99) {\n    amount = 0.005\n  }\n\n  return clamp(progress + amount, 0, 0.994)\n}\n","import { useEffect, useReducer, useRef } from 'react'\n\nimport { clamp } from './clamp'\nimport { createTimeout } from './createTimeout'\nimport { increment as defaultIncrement } from './increment'\nimport type { NProgressOptions, NProgressState } from './types'\n\n// A four-phase state machine. `idle` and `finished` both report\n// `isFinished: true` and differ only in the progress they hold, so the phase,\n// not `isFinished`, is what decides which transitions and timers apply.\ntype Phase = 'animating' | 'completing' | 'finished' | 'idle'\n\ninterface State {\n  phase: Phase\n  progress: number\n}\n\ntype Action =\n  | {\n      increment: (progress: number) => number\n      minimum: number\n      type: 'trickle'\n    }\n  | { minimum: number; type: 'start' }\n  | { type: 'complete' }\n  | { type: 'finish' }\n\nconst initialState: State = {\n  phase: 'idle',\n  progress: 0,\n}\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case 'complete':\n      // The original nprogress `done()` computes a random progress jump before\n      // animating to 1, but its queue runs both steps in the same tick, so the\n      // jump's CSS is overwritten before paint and never renders. Omitting the\n      // jump changes nothing visually.\n      //\n      // Ignored unless an animation is actually running, which is what makes a\n      // StrictMode double-mount a no-op rather than a spurious completion.\n      return state.phase === 'animating'\n        ? { phase: 'completing', progress: 1 }\n        : state\n\n    case 'finish':\n      return { phase: 'finished', progress: 1 }\n\n    case 'start':\n      // Matches the original nprogress `start()`, which calls set(0) and so\n      // paints first at `minimum` before any trickle runs.\n      //\n      // Guarded the same way as `complete`, and for the same reason: a repeat\n      // dispatch against a running animation must not rewind the bar. That\n      // happens whenever `minimum` changes mid-animation, as well as on a\n      // StrictMode double-mount.\n      return state.phase === 'animating'\n        ? state\n        : {\n            phase: 'animating',\n            progress: clamp(0, action.minimum, 1),\n          }\n\n    case 'trickle':\n      // Clamped here rather than trusted from the increment function, so a\n      // custom one cannot take the bar outside the documented range. Stopping\n      // short of 1 is that function's own business: 1 is what completion\n      // means.\n      return {\n        ...state,\n        progress: clamp(action.increment(state.progress), action.minimum, 1),\n      }\n  }\n}\n\nexport const useNProgress = ({\n  animationDuration = 200,\n  increment = defaultIncrement,\n  incrementDuration = 200,\n  isAnimating = false,\n  minimum = 0.08,\n}: NProgressOptions = {}): NProgressState => {\n  const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)\n\n  // Held in a ref so the trickle timer can read the latest increment function\n  // without listing it as a dependency. Consumers commonly pass an inline\n  // function, whose identity changes every render; depending on it directly\n  // would cancel and recreate the timer each time, and a render loop faster\n  // than `incrementDuration` would stop the bar advancing altogether.\n  const incrementRef = useRef(increment)\n  useEffect(() => {\n    incrementRef.current = increment\n  })\n\n  useEffect(() => {\n    dispatch(isAnimating ? { minimum, type: 'start' } : { type: 'complete' })\n  }, [isAnimating, minimum])\n\n  // A timer per running phase, rather than one effect branching over both.\n  // Each then depends only on the options its own phase reads, so changing an\n  // option the running phase ignores cannot cancel its timer. Both are keyed\n  // on the phase rather than on progress, so trickling does not tear down and\n  // recreate the timer mid-animation.\n  useEffect(() => {\n    if (phase !== 'animating') {\n      return\n    }\n\n    const timeout = createTimeout()\n\n    const trickle = () => {\n      dispatch({ increment: incrementRef.current, minimum, type: 'trickle' })\n      timeout.schedule(trickle, incrementDuration)\n    }\n    timeout.schedule(trickle, incrementDuration)\n\n    return () => timeout.cancel()\n  }, [incrementDuration, minimum, phase])\n\n  useEffect(() => {\n    if (phase !== 'completing') {\n      return\n    }\n\n    const timeout = createTimeout()\n    timeout.schedule(() => dispatch({ type: 'finish' }), animationDuration)\n\n    return () => timeout.cancel()\n  }, [animationDuration, phase])\n\n  return {\n    animationDuration,\n    isFinished: phase === 'finished' || phase === 'idle',\n    progress,\n  }\n}\n","import type { FC, ReactElement } from 'react'\n\nimport type { NProgressOptions, NProgressState } from './types'\nimport { useNProgress } from './useNProgress'\n\ntype Props = NProgressOptions & {\n  children: (renderProps: NProgressState) => ReactElement\n}\n\nexport const NProgress: FC<Props> = ({ children, ...restProps }: Props) => {\n  const renderProps = useNProgress(restProps)\n  return children(renderProps)\n}\n"],"mappings":";;;;AAAA,MAAa,SAAS,KAAa,OAAe,UAA0B;CAC1E,MAAM,OAAO,QAAQ,MAAM;CAC3B,MAAM,OAAO,QAAQ,MAAM;CAC3B,OAAO;AACT;;;ACDA,MAAa,sBAAsB;CACjC,IAAI;CAEJ,MAAM,eAAqB;EACzB,IAAI,WAAW,KAAA,GACb,OAAO,qBAAqB,MAAM;CAEtC;CAEA,MAAM,YAAY,UAAsB,UAAwB;EAC9D,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,MAAM,SAA+B,SAAS;GAC5C,QAAQ,SAAS;GACjB,YAAY,OAAO;GACnB,IAAI,YAAY,OAAO;IACrB,SAAS;IACT;GACF;GACA,SAAS,OAAO,sBAAsB,KAAK;EAC7C;EAEA,SAAS,OAAO,sBAAsB,KAAK;CAC7C;CAEA,OAAO;EACL;EACA;CACF;AACF;;;AChCA,MAAa,aAAa,aAA6B;CACrD,IAAI,SAAS;CAEb,IAAI,YAAY,KAAK,WAAW,IAC9B,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,KACvC,SAAS;CAGX,OAAO,MAAM,WAAW,QAAQ,GAAG,IAAK;AAC1C;;;ACWA,MAAM,eAAsB;CAC1B,OAAO;CACP,UAAU;AACZ;AAEA,MAAM,WAAW,OAAc,WAA0B;CACvD,QAAQ,OAAO,MAAf;EACE,KAAK,YAQH,OAAO,MAAM,UAAU,cACnB;GAAE,OAAO;GAAc,UAAU;EAAE,IACnC;EAEN,KAAK,UACH,OAAO;GAAE,OAAO;GAAY,UAAU;EAAE;EAE1C,KAAK,SAQH,OAAO,MAAM,UAAU,cACnB,QACA;GACE,OAAO;GACP,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC;EACtC;EAEN,KAAK,WAKH,OAAO;GACL,GAAG;GACH,UAAU,MAAM,OAAO,UAAU,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC;EACrE;CACJ;AACF;AAEA,MAAa,gBAAgB,EAC3B,oBAAoB,KACpB,WAAA,cAAYA,WACZ,oBAAoB,KACpB,cAAc,OACd,UAAU,QACU,CAAC,MAAsB;CAC3C,MAAM,CAAC,EAAE,OAAO,YAAY,aAAA,GAAYC,MAAAA,WAAAA,CAAW,SAAS,YAAY;CAOxE,MAAM,gBAAA,GAAeC,MAAAA,OAAAA,CAAOC,WAAS;CACrC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,aAAa,UAAUA;CACzB,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,SAAS,cAAc;GAAE;GAAS,MAAM;EAAQ,IAAI,EAAE,MAAM,WAAW,CAAC;CAC1E,GAAG,CAAC,aAAa,OAAO,CAAC;CAOzB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,UAAU,aACZ;EAGF,MAAM,UAAU,cAAc;EAE9B,MAAM,gBAAgB;GACpB,SAAS;IAAE,WAAW,aAAa;IAAS;IAAS,MAAM;GAAU,CAAC;GACtE,QAAQ,SAAS,SAAS,iBAAiB;EAC7C;EACA,QAAQ,SAAS,SAAS,iBAAiB;EAE3C,aAAa,QAAQ,OAAO;CAC9B,GAAG;EAAC;EAAmB;EAAS;CAAK,CAAC;CAEtC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,UAAU,cACZ;EAGF,MAAM,UAAU,cAAc;EAC9B,QAAQ,eAAe,SAAS,EAAE,MAAM,SAAS,CAAC,GAAG,iBAAiB;EAEtE,aAAa,QAAQ,OAAO;CAC9B,GAAG,CAAC,mBAAmB,KAAK,CAAC;CAE7B,OAAO;EACL;EACA,YAAY,UAAU,cAAc,UAAU;EAC9C;CACF;AACF;;;AC/HA,MAAa,aAAwB,EAAE,UAAU,GAAG,gBAAuB;CAEzE,OAAO,SADa,aAAa,SACP,CAAC;AAC7B"}

package/dist/react-nprogress.d.cts

@@ -2,6 +2,7 @@ import { FC, ReactElement } from "react";
 //#region src/types.d.ts
 interface NProgressOptions {
   animationDuration?: number;
+  increment?: (progress: number) => number;
   incrementDuration?: number;
   isAnimating?: boolean;
   minimum?: number;
@@ -19,7 +20,7 @@ type Props = NProgressOptions & {
 declare const NProgress: FC<Props>;
 //#endregion
 //#region src/useNProgress.d.ts
-declare const useNProgress: ({ animationDuration, incrementDuration, isAnimating, minimum }?: NProgressOptions) => NProgressState;
+declare const useNProgress: ({ animationDuration, increment, incrementDuration, isAnimating, minimum }?: NProgressOptions) => NProgressState;
 //#endregion
 export { NProgress, type NProgressOptions, type NProgressState, useNProgress };
 //# sourceMappingURL=react-nprogress.d.cts.map

package/dist/react-nprogress.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"react-nprogress.d.cts","names":[],"sources":["../src/types.ts","../src/NProgress.tsx","../src/useNProgress.tsx"],"mappings":";;UAAiB;EACf;EACA;EACA;EACA;;UAGe;EACf;EACA;EACA;;;;KCLG,QAAQ;EACX,WAAW,aAAa,mBAAmB;;cAGhC,WAAW,GAAG;;;cC8Dd,iBAAgB,mBAAA,mBAAA,aAAA,YAK1B,qBAAwB"}
+{"version":3,"file":"react-nprogress.d.cts","names":[],"sources":["../src/types.ts","../src/NProgress.tsx","../src/useNProgress.tsx"],"mappings":";;UAAiB;EACf;EACA,aAAa;EACb;EACA;EACA;;UAGe;EACf;EACA;EACA;;;;KCNG,QAAQ;EACX,WAAW,aAAa,mBAAmB;;cAGhC,WAAW,GAAG;;;cCmEd,iBAAgB,mBAAA,WAAA,mBAAA,aAAA,YAM1B,qBAAwB"}

package/dist/react-nprogress.d.mts

@@ -2,6 +2,7 @@ import { FC, ReactElement } from "react";
 //#region src/types.d.ts
 interface NProgressOptions {
   animationDuration?: number;
+  increment?: (progress: number) => number;
   incrementDuration?: number;
   isAnimating?: boolean;
   minimum?: number;
@@ -19,7 +20,7 @@ type Props = NProgressOptions & {
 declare const NProgress: FC<Props>;
 //#endregion
 //#region src/useNProgress.d.ts
-declare const useNProgress: ({ animationDuration, incrementDuration, isAnimating, minimum }?: NProgressOptions) => NProgressState;
+declare const useNProgress: ({ animationDuration, increment, incrementDuration, isAnimating, minimum }?: NProgressOptions) => NProgressState;
 //#endregion
 export { NProgress, type NProgressOptions, type NProgressState, useNProgress };
 //# sourceMappingURL=react-nprogress.d.mts.map

package/dist/react-nprogress.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"react-nprogress.d.mts","names":[],"sources":["../src/types.ts","../src/NProgress.tsx","../src/useNProgress.tsx"],"mappings":";;UAAiB;EACf;EACA;EACA;EACA;;UAGe;EACf;EACA;EACA;;;;KCLG,QAAQ;EACX,WAAW,aAAa,mBAAmB;;cAGhC,WAAW,GAAG;;;cC8Dd,iBAAgB,mBAAA,mBAAA,aAAA,YAK1B,qBAAwB"}
+{"version":3,"file":"react-nprogress.d.mts","names":[],"sources":["../src/types.ts","../src/NProgress.tsx","../src/useNProgress.tsx"],"mappings":";;UAAiB;EACf;EACA,aAAa;EACb;EACA;EACA;;UAGe;EACf;EACA;EACA;;;;KCNG,QAAQ;EACX,WAAW,aAAa,mBAAmB;;cAGhC,WAAW,GAAG;;;cCmEd,iBAAgB,mBAAA,WAAA,mBAAA,aAAA,YAM1B,qBAAwB"}

package/dist/react-nprogress.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useRef } from "react";
 //#region src/clamp.ts
 const clamp = (num, lower, upper) => {
 	num = num <= upper ? num : upper;
@@ -61,16 +61,20 @@ const reducer = (state, action) => {
 		};
 		case "start": return state.phase === "animating" ? state : {
 			phase: "animating",
-			progress: clamp(increment(0), action.minimum, 1)
+			progress: clamp(0, action.minimum, 1)
 		};
 		case "trickle": return {
 			...state,
-			progress: clamp(increment(state.progress), action.minimum, 1)
+			progress: clamp(action.increment(state.progress), action.minimum, 1)
 		};
 	}
 };
-const useNProgress = ({ animationDuration = 200, incrementDuration = 200, isAnimating = false, minimum = .08 } = {}) => {
+const useNProgress = ({ animationDuration = 200, increment: increment$1 = increment, incrementDuration = 200, isAnimating = false, minimum = .08 } = {}) => {
 	const [{ phase, progress }, dispatch] = useReducer(reducer, initialState);
+	const incrementRef = useRef(increment$1);
+	useEffect(() => {
+		incrementRef.current = increment$1;
+	});
 	useEffect(() => {
 		dispatch(isAnimating ? {
 			minimum,
@@ -82,6 +86,7 @@ const useNProgress = ({ animationDuration = 200, incrementDuration = 200, isAnim
 		const timeout = createTimeout();
 		const trickle = () => {
 			dispatch({
+				increment: incrementRef.current,
 				minimum,
 				type: "trickle"
 			});

package/dist/react-nprogress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"react-nprogress.mjs","names":[],"sources":["../src/clamp.ts","../src/createTimeout.ts","../src/increment.ts","../src/useNProgress.tsx","../src/NProgress.tsx"],"sourcesContent":["export const clamp = (num: number, lower: number, upper: number): number => {\n  num = num <= upper ? num : upper\n  num = num >= lower ? num : lower\n  return num\n}\n","// Uses requestAnimationFrame rather than setTimeout for smoother animation\n// timing. Note that rAF is throttled or paused in background tabs, so progress\n// will stall when the tab is hidden and resume when it regains focus.\nexport const createTimeout = () => {\n  let handle: number | undefined\n\n  const cancel = (): void => {\n    if (handle !== undefined) {\n      window.cancelAnimationFrame(handle)\n    }\n  }\n\n  const schedule = (callback: () => void, delay: number): void => {\n    cancel()\n\n    let deltaTime\n    let start: number | undefined\n    const frame: FrameRequestCallback = (time) => {\n      start = start || time\n      deltaTime = time - start\n      if (deltaTime > delay) {\n        callback()\n        return\n      }\n      handle = window.requestAnimationFrame(frame)\n    }\n\n    handle = window.requestAnimationFrame(frame)\n  }\n\n  return {\n    cancel,\n    schedule,\n  }\n}\n","import { clamp } from './clamp'\n\nexport const increment = (progress: number): number => {\n  let amount = 0\n\n  if (progress >= 0 && progress < 0.2) {\n    amount = 0.1\n  } else if (progress >= 0.2 && progress < 0.5) {\n    amount = 0.04\n  } else if (progress >= 0.5 && progress < 0.8) {\n    amount = 0.02\n  } else if (progress >= 0.8 && progress < 0.99) {\n    amount = 0.005\n  }\n\n  return clamp(progress + amount, 0, 0.994)\n}\n","import { useEffect, useReducer } from 'react'\n\nimport { clamp } from './clamp'\nimport { createTimeout } from './createTimeout'\nimport { increment } from './increment'\nimport type { NProgressOptions, NProgressState } from './types'\n\n// A four-phase state machine. `idle` and `finished` both report\n// `isFinished: true` and differ only in the progress they hold, so the phase,\n// not `isFinished`, is what decides which transitions and timers apply.\ntype Phase = 'animating' | 'completing' | 'finished' | 'idle'\n\ninterface State {\n  phase: Phase\n  progress: number\n}\n\ntype Action =\n  | { minimum: number; type: 'start' }\n  | { minimum: number; type: 'trickle' }\n  | { type: 'complete' }\n  | { type: 'finish' }\n\nconst initialState: State = {\n  phase: 'idle',\n  progress: 0,\n}\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case 'complete':\n      // Unlike the original nprogress `done()`, completion does not include a\n      // random progress jump before animating to 1. This keeps the primitive\n      // predictable; consumers can set a higher progress value before stopping\n      // the animation if they want that effect.\n      //\n      // Ignored unless an animation is actually running, which is what makes a\n      // StrictMode double-mount a no-op rather than a spurious completion.\n      return state.phase === 'animating'\n        ? { phase: 'completing', progress: 1 }\n        : state\n\n    case 'finish':\n      return { phase: 'finished', progress: 1 }\n\n    case 'start':\n      // The original nprogress calls set(0) - which clamps to `minimum` -\n      // before the first trickle. Here, the first trickle starts from\n      // increment(0) = 0.1, so the bar appears at max(0.1, minimum) rather\n      // than exactly `minimum`. The difference is negligible at the default\n      // minimum of 0.08.\n      //\n      // Guarded the same way as `complete`, and for the same reason: a repeat\n      // dispatch against a running animation must not rewind the bar. That\n      // happens whenever `minimum` changes mid-animation, as well as on a\n      // StrictMode double-mount.\n      return state.phase === 'animating'\n        ? state\n        : {\n            phase: 'animating',\n            progress: clamp(increment(0), action.minimum, 1),\n          }\n\n    case 'trickle':\n      return {\n        ...state,\n        progress: clamp(increment(state.progress), action.minimum, 1),\n      }\n  }\n}\n\nexport const useNProgress = ({\n  animationDuration = 200,\n  incrementDuration = 200,\n  isAnimating = false,\n  minimum = 0.08,\n}: NProgressOptions = {}): NProgressState => {\n  const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)\n\n  useEffect(() => {\n    dispatch(isAnimating ? { minimum, type: 'start' } : { type: 'complete' })\n  }, [isAnimating, minimum])\n\n  // A timer per running phase, rather than one effect branching over both.\n  // Each then depends only on the options its own phase reads, so changing an\n  // option the running phase ignores cannot cancel its timer. Both are keyed\n  // on the phase rather than on progress, so trickling does not tear down and\n  // recreate the timer mid-animation.\n  useEffect(() => {\n    if (phase !== 'animating') {\n      return\n    }\n\n    const timeout = createTimeout()\n\n    const trickle = () => {\n      dispatch({ minimum, type: 'trickle' })\n      timeout.schedule(trickle, incrementDuration)\n    }\n    timeout.schedule(trickle, incrementDuration)\n\n    return () => timeout.cancel()\n  }, [incrementDuration, minimum, phase])\n\n  useEffect(() => {\n    if (phase !== 'completing') {\n      return\n    }\n\n    const timeout = createTimeout()\n    timeout.schedule(() => dispatch({ type: 'finish' }), animationDuration)\n\n    return () => timeout.cancel()\n  }, [animationDuration, phase])\n\n  return {\n    animationDuration,\n    isFinished: phase === 'finished' || phase === 'idle',\n    progress,\n  }\n}\n","import type { FC, ReactElement } from 'react'\n\nimport type { NProgressOptions, NProgressState } from './types'\nimport { useNProgress } from './useNProgress'\n\ntype Props = NProgressOptions & {\n  children: (renderProps: NProgressState) => ReactElement\n}\n\nexport const NProgress: FC<Props> = ({ children, ...restProps }: Props) => {\n  const renderProps = useNProgress(restProps)\n  return children(renderProps)\n}\n"],"mappings":";;;AAAA,MAAa,SAAS,KAAa,OAAe,UAA0B;CAC1E,MAAM,OAAO,QAAQ,MAAM;CAC3B,MAAM,OAAO,QAAQ,MAAM;CAC3B,OAAO;AACT;;;ACDA,MAAa,sBAAsB;CACjC,IAAI;CAEJ,MAAM,eAAqB;EACzB,IAAI,WAAW,KAAA,GACb,OAAO,qBAAqB,MAAM;CAEtC;CAEA,MAAM,YAAY,UAAsB,UAAwB;EAC9D,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,MAAM,SAA+B,SAAS;GAC5C,QAAQ,SAAS;GACjB,YAAY,OAAO;GACnB,IAAI,YAAY,OAAO;IACrB,SAAS;IACT;GACF;GACA,SAAS,OAAO,sBAAsB,KAAK;EAC7C;EAEA,SAAS,OAAO,sBAAsB,KAAK;CAC7C;CAEA,OAAO;EACL;EACA;CACF;AACF;;;AChCA,MAAa,aAAa,aAA6B;CACrD,IAAI,SAAS;CAEb,IAAI,YAAY,KAAK,WAAW,IAC9B,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,KACvC,SAAS;CAGX,OAAO,MAAM,WAAW,QAAQ,GAAG,IAAK;AAC1C;;;ACOA,MAAM,eAAsB;CAC1B,OAAO;CACP,UAAU;AACZ;AAEA,MAAM,WAAW,OAAc,WAA0B;CACvD,QAAQ,OAAO,MAAf;EACE,KAAK,YAQH,OAAO,MAAM,UAAU,cACnB;GAAE,OAAO;GAAc,UAAU;EAAE,IACnC;EAEN,KAAK,UACH,OAAO;GAAE,OAAO;GAAY,UAAU;EAAE;EAE1C,KAAK,SAWH,OAAO,MAAM,UAAU,cACnB,QACA;GACE,OAAO;GACP,UAAU,MAAM,UAAU,CAAC,GAAG,OAAO,SAAS,CAAC;EACjD;EAEN,KAAK,WACH,OAAO;GACL,GAAG;GACH,UAAU,MAAM,UAAU,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC;EAC9D;CACJ;AACF;AAEA,MAAa,gBAAgB,EAC3B,oBAAoB,KACpB,oBAAoB,KACpB,cAAc,OACd,UAAU,QACU,CAAC,MAAsB;CAC3C,MAAM,CAAC,EAAE,OAAO,YAAY,YAAY,WAAW,SAAS,YAAY;CAExE,gBAAgB;EACd,SAAS,cAAc;GAAE;GAAS,MAAM;EAAQ,IAAI,EAAE,MAAM,WAAW,CAAC;CAC1E,GAAG,CAAC,aAAa,OAAO,CAAC;CAOzB,gBAAgB;EACd,IAAI,UAAU,aACZ;EAGF,MAAM,UAAU,cAAc;EAE9B,MAAM,gBAAgB;GACpB,SAAS;IAAE;IAAS,MAAM;GAAU,CAAC;GACrC,QAAQ,SAAS,SAAS,iBAAiB;EAC7C;EACA,QAAQ,SAAS,SAAS,iBAAiB;EAE3C,aAAa,QAAQ,OAAO;CAC9B,GAAG;EAAC;EAAmB;EAAS;CAAK,CAAC;CAEtC,gBAAgB;EACd,IAAI,UAAU,cACZ;EAGF,MAAM,UAAU,cAAc;EAC9B,QAAQ,eAAe,SAAS,EAAE,MAAM,SAAS,CAAC,GAAG,iBAAiB;EAEtE,aAAa,QAAQ,OAAO;CAC9B,GAAG,CAAC,mBAAmB,KAAK,CAAC;CAE7B,OAAO;EACL;EACA,YAAY,UAAU,cAAc,UAAU;EAC9C;CACF;AACF;;;AC/GA,MAAa,aAAwB,EAAE,UAAU,GAAG,gBAAuB;CAEzE,OAAO,SADa,aAAa,SACP,CAAC;AAC7B"}
+{"version":3,"file":"react-nprogress.mjs","names":["defaultIncrement","increment"],"sources":["../src/clamp.ts","../src/createTimeout.ts","../src/increment.ts","../src/useNProgress.tsx","../src/NProgress.tsx"],"sourcesContent":["export const clamp = (num: number, lower: number, upper: number): number => {\n  num = num <= upper ? num : upper\n  num = num >= lower ? num : lower\n  return num\n}\n","// Uses requestAnimationFrame rather than setTimeout for smoother animation\n// timing. Note that rAF is throttled or paused in background tabs, so progress\n// will stall when the tab is hidden and resume when it regains focus.\nexport const createTimeout = () => {\n  let handle: number | undefined\n\n  const cancel = (): void => {\n    if (handle !== undefined) {\n      window.cancelAnimationFrame(handle)\n    }\n  }\n\n  const schedule = (callback: () => void, delay: number): void => {\n    cancel()\n\n    let deltaTime\n    let start: number | undefined\n    const frame: FrameRequestCallback = (time) => {\n      start = start || time\n      deltaTime = time - start\n      if (deltaTime > delay) {\n        callback()\n        return\n      }\n      handle = window.requestAnimationFrame(frame)\n    }\n\n    handle = window.requestAnimationFrame(frame)\n  }\n\n  return {\n    cancel,\n    schedule,\n  }\n}\n","import { clamp } from './clamp'\n\nexport const increment = (progress: number): number => {\n  let amount = 0\n\n  if (progress >= 0 && progress < 0.2) {\n    amount = 0.1\n  } else if (progress >= 0.2 && progress < 0.5) {\n    amount = 0.04\n  } else if (progress >= 0.5 && progress < 0.8) {\n    amount = 0.02\n  } else if (progress >= 0.8 && progress < 0.99) {\n    amount = 0.005\n  }\n\n  return clamp(progress + amount, 0, 0.994)\n}\n","import { useEffect, useReducer, useRef } from 'react'\n\nimport { clamp } from './clamp'\nimport { createTimeout } from './createTimeout'\nimport { increment as defaultIncrement } from './increment'\nimport type { NProgressOptions, NProgressState } from './types'\n\n// A four-phase state machine. `idle` and `finished` both report\n// `isFinished: true` and differ only in the progress they hold, so the phase,\n// not `isFinished`, is what decides which transitions and timers apply.\ntype Phase = 'animating' | 'completing' | 'finished' | 'idle'\n\ninterface State {\n  phase: Phase\n  progress: number\n}\n\ntype Action =\n  | {\n      increment: (progress: number) => number\n      minimum: number\n      type: 'trickle'\n    }\n  | { minimum: number; type: 'start' }\n  | { type: 'complete' }\n  | { type: 'finish' }\n\nconst initialState: State = {\n  phase: 'idle',\n  progress: 0,\n}\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case 'complete':\n      // The original nprogress `done()` computes a random progress jump before\n      // animating to 1, but its queue runs both steps in the same tick, so the\n      // jump's CSS is overwritten before paint and never renders. Omitting the\n      // jump changes nothing visually.\n      //\n      // Ignored unless an animation is actually running, which is what makes a\n      // StrictMode double-mount a no-op rather than a spurious completion.\n      return state.phase === 'animating'\n        ? { phase: 'completing', progress: 1 }\n        : state\n\n    case 'finish':\n      return { phase: 'finished', progress: 1 }\n\n    case 'start':\n      // Matches the original nprogress `start()`, which calls set(0) and so\n      // paints first at `minimum` before any trickle runs.\n      //\n      // Guarded the same way as `complete`, and for the same reason: a repeat\n      // dispatch against a running animation must not rewind the bar. That\n      // happens whenever `minimum` changes mid-animation, as well as on a\n      // StrictMode double-mount.\n      return state.phase === 'animating'\n        ? state\n        : {\n            phase: 'animating',\n            progress: clamp(0, action.minimum, 1),\n          }\n\n    case 'trickle':\n      // Clamped here rather than trusted from the increment function, so a\n      // custom one cannot take the bar outside the documented range. Stopping\n      // short of 1 is that function's own business: 1 is what completion\n      // means.\n      return {\n        ...state,\n        progress: clamp(action.increment(state.progress), action.minimum, 1),\n      }\n  }\n}\n\nexport const useNProgress = ({\n  animationDuration = 200,\n  increment = defaultIncrement,\n  incrementDuration = 200,\n  isAnimating = false,\n  minimum = 0.08,\n}: NProgressOptions = {}): NProgressState => {\n  const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)\n\n  // Held in a ref so the trickle timer can read the latest increment function\n  // without listing it as a dependency. Consumers commonly pass an inline\n  // function, whose identity changes every render; depending on it directly\n  // would cancel and recreate the timer each time, and a render loop faster\n  // than `incrementDuration` would stop the bar advancing altogether.\n  const incrementRef = useRef(increment)\n  useEffect(() => {\n    incrementRef.current = increment\n  })\n\n  useEffect(() => {\n    dispatch(isAnimating ? { minimum, type: 'start' } : { type: 'complete' })\n  }, [isAnimating, minimum])\n\n  // A timer per running phase, rather than one effect branching over both.\n  // Each then depends only on the options its own phase reads, so changing an\n  // option the running phase ignores cannot cancel its timer. Both are keyed\n  // on the phase rather than on progress, so trickling does not tear down and\n  // recreate the timer mid-animation.\n  useEffect(() => {\n    if (phase !== 'animating') {\n      return\n    }\n\n    const timeout = createTimeout()\n\n    const trickle = () => {\n      dispatch({ increment: incrementRef.current, minimum, type: 'trickle' })\n      timeout.schedule(trickle, incrementDuration)\n    }\n    timeout.schedule(trickle, incrementDuration)\n\n    return () => timeout.cancel()\n  }, [incrementDuration, minimum, phase])\n\n  useEffect(() => {\n    if (phase !== 'completing') {\n      return\n    }\n\n    const timeout = createTimeout()\n    timeout.schedule(() => dispatch({ type: 'finish' }), animationDuration)\n\n    return () => timeout.cancel()\n  }, [animationDuration, phase])\n\n  return {\n    animationDuration,\n    isFinished: phase === 'finished' || phase === 'idle',\n    progress,\n  }\n}\n","import type { FC, ReactElement } from 'react'\n\nimport type { NProgressOptions, NProgressState } from './types'\nimport { useNProgress } from './useNProgress'\n\ntype Props = NProgressOptions & {\n  children: (renderProps: NProgressState) => ReactElement\n}\n\nexport const NProgress: FC<Props> = ({ children, ...restProps }: Props) => {\n  const renderProps = useNProgress(restProps)\n  return children(renderProps)\n}\n"],"mappings":";;;AAAA,MAAa,SAAS,KAAa,OAAe,UAA0B;CAC1E,MAAM,OAAO,QAAQ,MAAM;CAC3B,MAAM,OAAO,QAAQ,MAAM;CAC3B,OAAO;AACT;;;ACDA,MAAa,sBAAsB;CACjC,IAAI;CAEJ,MAAM,eAAqB;EACzB,IAAI,WAAW,KAAA,GACb,OAAO,qBAAqB,MAAM;CAEtC;CAEA,MAAM,YAAY,UAAsB,UAAwB;EAC9D,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,MAAM,SAA+B,SAAS;GAC5C,QAAQ,SAAS;GACjB,YAAY,OAAO;GACnB,IAAI,YAAY,OAAO;IACrB,SAAS;IACT;GACF;GACA,SAAS,OAAO,sBAAsB,KAAK;EAC7C;EAEA,SAAS,OAAO,sBAAsB,KAAK;CAC7C;CAEA,OAAO;EACL;EACA;CACF;AACF;;;AChCA,MAAa,aAAa,aAA6B;CACrD,IAAI,SAAS;CAEb,IAAI,YAAY,KAAK,WAAW,IAC9B,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,KACvC,SAAS;CAGX,OAAO,MAAM,WAAW,QAAQ,GAAG,IAAK;AAC1C;;;ACWA,MAAM,eAAsB;CAC1B,OAAO;CACP,UAAU;AACZ;AAEA,MAAM,WAAW,OAAc,WAA0B;CACvD,QAAQ,OAAO,MAAf;EACE,KAAK,YAQH,OAAO,MAAM,UAAU,cACnB;GAAE,OAAO;GAAc,UAAU;EAAE,IACnC;EAEN,KAAK,UACH,OAAO;GAAE,OAAO;GAAY,UAAU;EAAE;EAE1C,KAAK,SAQH,OAAO,MAAM,UAAU,cACnB,QACA;GACE,OAAO;GACP,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC;EACtC;EAEN,KAAK,WAKH,OAAO;GACL,GAAG;GACH,UAAU,MAAM,OAAO,UAAU,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC;EACrE;CACJ;AACF;AAEA,MAAa,gBAAgB,EAC3B,oBAAoB,KACpB,WAAA,cAAYA,WACZ,oBAAoB,KACpB,cAAc,OACd,UAAU,QACU,CAAC,MAAsB;CAC3C,MAAM,CAAC,EAAE,OAAO,YAAY,YAAY,WAAW,SAAS,YAAY;CAOxE,MAAM,eAAe,OAAOC,WAAS;CACrC,gBAAgB;EACd,aAAa,UAAUA;CACzB,CAAC;CAED,gBAAgB;EACd,SAAS,cAAc;GAAE;GAAS,MAAM;EAAQ,IAAI,EAAE,MAAM,WAAW,CAAC;CAC1E,GAAG,CAAC,aAAa,OAAO,CAAC;CAOzB,gBAAgB;EACd,IAAI,UAAU,aACZ;EAGF,MAAM,UAAU,cAAc;EAE9B,MAAM,gBAAgB;GACpB,SAAS;IAAE,WAAW,aAAa;IAAS;IAAS,MAAM;GAAU,CAAC;GACtE,QAAQ,SAAS,SAAS,iBAAiB;EAC7C;EACA,QAAQ,SAAS,SAAS,iBAAiB;EAE3C,aAAa,QAAQ,OAAO;CAC9B,GAAG;EAAC;EAAmB;EAAS;CAAK,CAAC;CAEtC,gBAAgB;EACd,IAAI,UAAU,cACZ;EAGF,MAAM,UAAU,cAAc;EAC9B,QAAQ,eAAe,SAAS,EAAE,MAAM,SAAS,CAAC,GAAG,iBAAiB;EAEtE,aAAa,QAAQ,OAAO;CAC9B,GAAG,CAAC,mBAAmB,KAAK,CAAC;CAE7B,OAAO;EACL;EACA,YAAY,UAAU,cAAc,UAAU;EAC9C;CACF;AACF;;;AC/HA,MAAa,aAAwB,EAAE,UAAU,GAAG,gBAAuB;CAEzE,OAAO,SADa,aAAa,SACP,CAAC;AAC7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanem/react-nprogress",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "A React primitive for building slim progress bars.",
   "type": "commonjs",
   "exports": {

package/src/types.ts

@@ -1,5 +1,6 @@
 export interface NProgressOptions {
   animationDuration?: number
+  increment?: (progress: number) => number
   incrementDuration?: number
   isAnimating?: boolean
   minimum?: number

package/src/useNProgress.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useReducer } from 'react'
+import { useEffect, useReducer, useRef } from 'react'
 
 import { clamp } from './clamp'
 import { createTimeout } from './createTimeout'
-import { increment } from './increment'
+import { increment as defaultIncrement } from './increment'
 import type { NProgressOptions, NProgressState } from './types'
 
 // A four-phase state machine. `idle` and `finished` both report
@@ -16,8 +16,12 @@ interface State {
 }
 
 type Action =
+  | {
+      increment: (progress: number) => number
+      minimum: number
+      type: 'trickle'
+    }
   | { minimum: number; type: 'start' }
-  | { minimum: number; type: 'trickle' }
   | { type: 'complete' }
   | { type: 'finish' }
 
@@ -29,10 +33,10 @@ const initialState: State = {
 const reducer = (state: State, action: Action): State => {
   switch (action.type) {
     case 'complete':
-      // Unlike the original nprogress `done()`, completion does not include a
-      // random progress jump before animating to 1. This keeps the primitive
-      // predictable; consumers can set a higher progress value before stopping
-      // the animation if they want that effect.
+      // The original nprogress `done()` computes a random progress jump before
+      // animating to 1, but its queue runs both steps in the same tick, so the
+      // jump's CSS is overwritten before paint and never renders. Omitting the
+      // jump changes nothing visually.
       //
       // Ignored unless an animation is actually running, which is what makes a
       // StrictMode double-mount a no-op rather than a spurious completion.
@@ -44,11 +48,8 @@ const reducer = (state: State, action: Action): State => {
       return { phase: 'finished', progress: 1 }
 
     case 'start':
-      // The original nprogress calls set(0) - which clamps to `minimum` -
-      // before the first trickle. Here, the first trickle starts from
-      // increment(0) = 0.1, so the bar appears at max(0.1, minimum) rather
-      // than exactly `minimum`. The difference is negligible at the default
-      // minimum of 0.08.
+      // Matches the original nprogress `start()`, which calls set(0) and so
+      // paints first at `minimum` before any trickle runs.
       //
       // Guarded the same way as `complete`, and for the same reason: a repeat
       // dispatch against a running animation must not rewind the bar. That
@@ -58,25 +59,40 @@ const reducer = (state: State, action: Action): State => {
         ? state
         : {
             phase: 'animating',
-            progress: clamp(increment(0), action.minimum, 1),
+            progress: clamp(0, action.minimum, 1),
           }
 
     case 'trickle':
+      // Clamped here rather than trusted from the increment function, so a
+      // custom one cannot take the bar outside the documented range. Stopping
+      // short of 1 is that function's own business: 1 is what completion
+      // means.
       return {
         ...state,
-        progress: clamp(increment(state.progress), action.minimum, 1),
+        progress: clamp(action.increment(state.progress), action.minimum, 1),
       }
   }
 }
 
 export const useNProgress = ({
   animationDuration = 200,
+  increment = defaultIncrement,
   incrementDuration = 200,
   isAnimating = false,
   minimum = 0.08,
 }: NProgressOptions = {}): NProgressState => {
   const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)
 
+  // Held in a ref so the trickle timer can read the latest increment function
+  // without listing it as a dependency. Consumers commonly pass an inline
+  // function, whose identity changes every render; depending on it directly
+  // would cancel and recreate the timer each time, and a render loop faster
+  // than `incrementDuration` would stop the bar advancing altogether.
+  const incrementRef = useRef(increment)
+  useEffect(() => {
+    incrementRef.current = increment
+  })
+
   useEffect(() => {
     dispatch(isAnimating ? { minimum, type: 'start' } : { type: 'complete' })
   }, [isAnimating, minimum])
@@ -94,7 +110,7 @@ export const useNProgress = ({
     const timeout = createTimeout()
 
     const trickle = () => {
-      dispatch({ minimum, type: 'trickle' })
+      dispatch({ increment: incrementRef.current, minimum, type: 'trickle' })
       timeout.schedule(trickle, incrementDuration)
     }
     timeout.schedule(trickle, incrementDuration)