npm - react-top-progress - Versions diffs - 1.0.4 → 1.1.1 - Mend

react-top-progress 1.0.4 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -1,27 +1,23 @@
 # react-top-progress
+![npm version](https://img.shields.io/npm/v/react-top-progress)
+![downloads](https://img.shields.io/npm/dw/react-top-progress)
+![license](https://img.shields.io/npm/l/react-top-progress)
 **<a href="https://react-test-progress.vercel.app/" target="_blank">👉 View Live Demo</a>**
-A lightweight, modern, and performant top loading progress bar for React. Built for seamless user experiences with zero dependencies!
+A lightweight, modern, and performant top loading progress bar for React. Built for seamless user experiences with **zero dependencies**!
 Perfect for Next.js App Router, Vite, and standard SPA architectures.
-## Features
-- **0 Dependencies**: Tiny footprint (~1.8kb gzipped).
-- **Advanced Loaders**: `continuous` and `static` start modes matching network logic.
-- **Premium DX**: Controlled programmatically with simple global API hooks, or direct React `ref`.
-- **Customizable**: Add gradients, background container colors, custom CSS classes, and glows.
-- **Performant**: Uses `transform: translateZ(0)` hardware acceleration and `cubic-bezier` CSS transitions.
-- **TypeScript ready**: Full types included.
 ## 🚀 Why react-top-progress?
 - **SSR & App Router Safe**: Fully compatible with Next.js SSR & App Router natively
-- **Framework Agnostic**: Works perfectly in React, Vite, CRA, Remix
+- **Framework Agnostic**: Works perfectly in React, Vite, CRA, Remix, React Router
 - **0 Dependencies**: No weird transitive bloat
-- **📦 Tiny Bundle Size**: ~1.8kb gzipped
+- **📦 Tiny Bundle Size**: ~1.9kb gzipped (Tree-shakable)
 - **Premium Aesthetics**: Smooth realistic loading animation with beautiful gradients & glows
+- **Promise Integrations**: Auto-wrapping utilities like `withProgress` for API fetching
 ## Installation
@@ -29,50 +25,48 @@ Perfect for Next.js App Router, Vite, and standard SPA architectures.
 npm install react-top-progress
 ```
-**Or using yarn / pnpm / bun:**
-```bash
-yarn add react-top-progress
-pnpm add react-top-progress
-bun add react-top-progress
-```
+## Quick Start (Next.js / Vite / React)
-## Next.js Usage (App Router)
+### Method 1: The Global Provider (Recommended)
-Because Next.js App Router removed native router events, you can manually construct a robust loader globally right in your `layout.tsx`.
+This approach automatically provides all routing configurations and is incredibly clean.
-```tsx
-"use client";
+```jsx
+import { ProgressProvider, useAutoProgress } from "react-top-progress";
-import { TopProgress, startProgress, finishProgress } from "react-top-progress";
+export default function RootLayout({ children }) {
+  // Use generic auto-route progress detector or just trigger global effects
+  // Optional but recommended for easy routing coverage!
-export default function Layout({ children }) {
   return (
-    <>
-      <TopProgress />
-      {/* Your Top Nav, Sidebar, etc. */}
+    <ProgressProvider color="#29D" height={3} shadow={true}>
       {children}
-    </>
+    </ProgressProvider>
   );
 }
 ```
-## Standard Quick Start
+### Method 2: Next.js App Router Generic Auto-Routing
-At the top level of your application (like Next.js `app/layout.jsx` or Vite `src/App.jsx`), render the component.
-Works flawlessly in both **JSX** and **TSX**!
+Because Next.js App Router removed native router events, you can quickly auto-wire progress with the `useRouteProgress` hook, which intrinsically detects all link navigation globally using zero-external dependencies!
 ```jsx
-import { TopProgress } from "react-top-progress";
+"use client";
+import { TopProgress, useRouteProgress } from "react-top-progress";
+export default function Layout({ children }) {
+  useRouteProgress(); // Auto-detects clicks, routing events, and history pushState!
-export default function RootLayout({ children }) {
   return (
-    <html lang="en">
-      <body>
-        <TopProgress />
-        {children}
-      </body>
-    </html>
+    <>
+      <TopProgress
+        height={4}
+        color="linear-gradient(90deg, #ff5500, #ff0080)"
+      />
+      {/* Your Top Nav, Sidebar, etc. */}
+      {children}
+    </>
   );
 }
 ```
@@ -87,64 +81,52 @@ You can trigger the loader from anywhere in your codebase by importing the funct
 | `continuousStart(startingValue?, refreshRate?)` | `number`, `number`         | Starts with a random value (20-30), then slowly ticks up (2-10) repetitively. Reaches max 90%.                       |
 | `staticStart(startingValue?)`                   | `number`                   | Starts the loader with a random static value between 30-50, waiting for completion.                                  |
 | `complete()` / `finishProgress()`               |                            | Instantly pushes the indicator to 100% and gracefully fades it out.                                                  |
+| `resetProgress()`                               |                            | Instantly zeroes out and hides the progress bar without fading.                                                      |
 | `increase(value)`                               | `number`                   | Manually increments the loader by a specific amount.                                                                 |
 | `decrease(value)`                               | `number`                   | Manually decrements the loader by a specific amount.                                                                 |
 | `setProgress(value)`                            | `number`                   | Hardsets to a specific progress percentage.                                                                          |
 | `getProgress()`                                 |                            | Returns the current progress percentage (0 - 100).                                                                   |
 | `withProgress(promise)`                         | `Promise<T>`               | Wraps an asynchronous action. `startProgress()` executes automatically before and completes automatically afterward. |
-### Global Usage Example
+### Promise Wrapper Example
 ```jsx
-import {
-  startProgress,
-  finishProgress,
-  withProgress,
-} from "react-top-progress";
-async function fetchData() {
-  startProgress("continuous");
-  try {
-    await apiCall();
-  } finally {
-    finishProgress(); // alias of complete()
-  }
-}
+import { withProgress } from "react-top-progress";
-// Or functionally wrap promises for ultimate DX:
-const loadProfile = () => withProgress(fetch("/api/profile"));
+const data = await withProgress(fetch("/api/users"));
 ```
 ## Component Properties
 You can customize `<TopProgress />` passing any of the following props:
-| Property             | Type            | Default         | Description                                                                                       |
-| -------------------- | --------------- | --------------- | ------------------------------------------------------------------------------------------------- |
-| `progress`           | `number`        |                 | Hardset the progress (0-100) if you want to bypass the internal store and control state yourself. |
-| `color`              | `string`        | `"red"`         | Background color of the bar. Accepts `linear-gradient(...)` or hex codes.                         |
-| `height`             | `number`        | `2`             | Height of the progress bar in pixels.                                                             |
-| `shadow`             | `boolean`       | `true`          | Appends a glorious trailing drop-glow peg matching the bar's color tracking its head.             |
-| `background`         | `string`        | `"transparent"` | Fills the container div's background layer under the progress element.                            |
-| `transitionTime`     | `number`        | `300`           | Fade transition time (ms) for the fade-out completion sequence.                                   |
-| `loaderSpeed`        | `number`        | `500`           | Loader width transition speed (ms).                                                               |
-| `waitingTime`        | `number`        | `1000`          | The delay time (ms) loader waits at 100% width before fading entirely out.                        |
-| `style`              | `CSSProperties` |                 | Inject custom JSX styles directly onto the loader element.                                        |
-| `className`          | `string`        |                 | Apply a specific custom CSS class to the loader element.                                          |
-| `containerStyle`     | `CSSProperties` |                 | Configure inline styles for the fixed `<div />` wrapper container.                                |
-| `containerClassName` | `string`        |                 | Custom CSS class applied onto the wrapper container.                                              |
-| `onLoaderFinished`   | `() => void`    |                 | A callback function executing precisely when the loader fully hits 100% max width.                |
+| Property             | Type            | Default                          | Description                                                                                       |
+| -------------------- | --------------- | -------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `progress`           | `number`        |                                  | Hardset the progress (0-100) if you want to bypass the internal store and control state yourself. |
+| `color`              | `string`        | `"#29D"`                         | Background color of the bar. Accepts `linear-gradient(...)` or hex codes.                         |
+| `height`             | `number`        | `3`                              | Height of the progress bar in pixels.                                                             |
+| `shadow`             | `boolean`       | `true`                           | Appends a glorious trailing drop-glow peg matching the bar's color tracking its head.             |
+| `background`         | `string`        | `"transparent"`                  | Fills the container div's background layer under the progress element.                            |
+| `transitionSpeed`    | `number`        | `200`                            | Fade transition time (ms) for the fade-out completion sequence.                                   |
+| `loaderSpeed`        | `number`        | `500`                            | Loader width transition speed (ms).                                                               |
+| `waitingTime`        | `number`        | `1000`                           | The delay time (ms) loader waits at 100% width before fading entirely out.                        |
+| `easing`             | `string`        | `"cubic-bezier(0.4, 0, 0.2, 1)"` | Customizable CSS animation timing path curve.                                                     |
+| `style`              | `CSSProperties` |                                  | Inject custom JSX styles directly onto the loader element.                                        |
+| `className`          | `string`        |                                  | Apply a specific custom CSS class to the loader element.                                          |
+| `containerStyle`     | `CSSProperties` |                                  | Configure inline styles for the fixed `<div />` wrapper container.                                |
+| `containerClassName` | `string`        |                                  | Custom CSS class applied onto the wrapper container.                                              |
+| `onLoaderFinished`   | `() => void`    |                                  | A callback function executing precisely when the loader fully hits 100% max width.                |
 ## Compared to Alternatives
 Developers need to know why to switch. Here is the breakdown:
-| Library                 | Dependencies           | SSR Safe | Bundle Size       |
-| ----------------------- | ---------------------- | -------- | ----------------- |
-| `nprogress`             | Old jQuery style logic | No       | Larger            |
-| `nextjs-toploader`      | Next-specific only     | Yes      | Medium            |
-| `react-top-loading-bar` | React mostly           | Some     | Medium            |
-| **react-top-progress**  | **0 dependencies**     | **Yes**  | **Tiny (~1.8kb)** |
+| Library                 | Dependencies           | SSR Safe | Routing Bindings  | Promise Wrap | Bundle Size       |
+| ----------------------- | ---------------------- | -------- | ----------------- | ------------ | ----------------- |
+| `nprogress`             | Old jQuery style logic | No       | ❌                | ❌           | Larger            |
+| `nextjs-toploader`      | Next-specific only     | Yes      | ✅ (Next.js)      | ❌           | Medium            |
+| `react-top-loading-bar` | React mostly           | Some     | ❌                | ❌           | Medium            |
+| **react-top-progress**  | **0 dependencies**     | **Yes**  | **✅ (Agnostic)** | **✅**       | **Tiny (~1.9kb)** |
 ## Credits

package/dist/index.d.mts CHANGED Viewed

@@ -1,4 +1,5 @@
 import React, { CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 interface TopProgressProps {
     progress?: number;
@@ -10,8 +11,10 @@ interface TopProgressProps {
     containerStyle?: CSSProperties;
     shadowStyle?: CSSProperties;
     transitionTime?: number;
+    transitionSpeed?: number;
     loaderSpeed?: number;
     waitingTime?: number;
+    easing?: string;
     className?: string;
     containerClassName?: string;
     onLoaderFinished?: () => void;
@@ -31,6 +34,14 @@ interface TopProgressRef {
 }
 declare const TopProgress: React.ForwardRefExoticComponent<TopProgressProps & React.RefAttributes<TopProgressRef>>;
+interface ProgressProviderProps extends TopProgressProps {
+    children: React.ReactNode;
+}
+declare const ProgressProvider: ({ children, ...props }: ProgressProviderProps) => react_jsx_runtime.JSX.Element;
+declare const useAutoProgress: () => void;
+declare const useRouteProgress: () => void;
 declare const startProgress: (type?: "continuous" | "static") => void;
 declare const continuousStart: (startingValue?: number, refreshRate?: number) => void;
 declare const staticStart: (startingValue?: number) => void;
@@ -40,6 +51,7 @@ declare const increaseProgress: (value: number) => void;
 declare const decreaseProgress: (value: number) => void;
 declare const getProgress: () => number | null;
 declare const setProgress: (value: number) => void;
+declare const resetProgress: () => void;
 declare const withProgress: <T>(promise: Promise<T>) => Promise<T>;
-export { TopProgress, type TopProgressProps, type TopProgressRef, completeProgress, continuousStart, decreaseProgress, finishProgress, getProgress, increaseProgress, setProgress, startProgress, staticStart, withProgress };
+export { ProgressProvider, type ProgressProviderProps, TopProgress, type TopProgressProps, type TopProgressRef, completeProgress, continuousStart, decreaseProgress, finishProgress, getProgress, increaseProgress, resetProgress, setProgress, startProgress, staticStart, useAutoProgress, useRouteProgress, withProgress };

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import React, { CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 interface TopProgressProps {
     progress?: number;
@@ -10,8 +11,10 @@ interface TopProgressProps {
     containerStyle?: CSSProperties;
     shadowStyle?: CSSProperties;
     transitionTime?: number;
+    transitionSpeed?: number;
     loaderSpeed?: number;
     waitingTime?: number;
+    easing?: string;
     className?: string;
     containerClassName?: string;
     onLoaderFinished?: () => void;
@@ -31,6 +34,14 @@ interface TopProgressRef {
 }
 declare const TopProgress: React.ForwardRefExoticComponent<TopProgressProps & React.RefAttributes<TopProgressRef>>;
+interface ProgressProviderProps extends TopProgressProps {
+    children: React.ReactNode;
+}
+declare const ProgressProvider: ({ children, ...props }: ProgressProviderProps) => react_jsx_runtime.JSX.Element;
+declare const useAutoProgress: () => void;
+declare const useRouteProgress: () => void;
 declare const startProgress: (type?: "continuous" | "static") => void;
 declare const continuousStart: (startingValue?: number, refreshRate?: number) => void;
 declare const staticStart: (startingValue?: number) => void;
@@ -40,6 +51,7 @@ declare const increaseProgress: (value: number) => void;
 declare const decreaseProgress: (value: number) => void;
 declare const getProgress: () => number | null;
 declare const setProgress: (value: number) => void;
+declare const resetProgress: () => void;
 declare const withProgress: <T>(promise: Promise<T>) => Promise<T>;
-export { TopProgress, type TopProgressProps, type TopProgressRef, completeProgress, continuousStart, decreaseProgress, finishProgress, getProgress, increaseProgress, setProgress, startProgress, staticStart, withProgress };
+export { ProgressProvider, type ProgressProviderProps, TopProgress, type TopProgressProps, type TopProgressRef, completeProgress, continuousStart, decreaseProgress, finishProgress, getProgress, increaseProgress, resetProgress, setProgress, startProgress, staticStart, useAutoProgress, useRouteProgress, withProgress };

package/dist/index.js CHANGED Viewed

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ProgressProvider: () => ProgressProvider,
   TopProgress: () => TopProgress,
   completeProgress: () => completeProgress,
   continuousStart: () => continuousStart,
@@ -28,9 +29,12 @@ __export(index_exports, {
   finishProgress: () => finishProgress,
   getProgress: () => getProgress,
   increaseProgress: () => increaseProgress,
+  resetProgress: () => resetProgress,
   setProgress: () => setProgress,
   startProgress: () => startProgress,
   staticStart: () => staticStart,
+  useAutoProgress: () => useAutoProgress,
+  useRouteProgress: () => useRouteProgress,
   withProgress: () => withProgress
 });
 module.exports = __toCommonJS(index_exports);
@@ -96,6 +100,11 @@ var ProgressStore = class {
       this.notify();
     }, this.config.waitingTime);
   }
+  reset() {
+    this.cleanup();
+    this.value = null;
+    this.notify();
+  }
   set(value) {
     this.cleanup();
     this.value = value;
@@ -139,6 +148,7 @@ var increaseProgress = (value) => progressStore.increase(value);
 var decreaseProgress = (value) => progressStore.decrease(value);
 var getProgress = () => progressStore.getProgress();
 var setProgress = (value) => progressStore.set(value);
+var resetProgress = () => progressStore.reset();
 var withProgress = async (promise) => {
   startProgress();
   try {
@@ -156,16 +166,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var TopProgress = (0, import_react.forwardRef)(
   ({
     progress: controlledProgress,
-    color = "red",
+    color = "#29D",
     shadow = true,
-    height = 2,
+    height = 3,
     background = "transparent",
     style,
     containerStyle,
     shadowStyle,
-    transitionTime = 300,
+    transitionTime,
+    transitionSpeed = 200,
     loaderSpeed = 500,
     waitingTime = 1e3,
+    easing = "cubic-bezier(0.4, 0, 0.2, 1)",
     className,
     containerClassName,
     onLoaderFinished,
@@ -177,6 +189,7 @@ var TopProgress = (0, import_react.forwardRef)(
     const [internalProgress, setInternalProgress] = (0, import_react.useState)(
       store.getValue()
     );
+    const [mounted, setMounted] = (0, import_react.useState)(false);
     (0, import_react.useImperativeHandle)(ref, () => ({
       start: (type) => store.start(type),
       continuousStart: (s, r) => store.continuousStart(s, r),
@@ -187,12 +200,14 @@ var TopProgress = (0, import_react.forwardRef)(
       getProgress: () => store.getProgress(),
       set: (v) => store.set(v)
     }));
+    const fadeSpeed = transitionTime !== void 0 ? transitionTime : transitionSpeed;
     (0, import_react.useEffect)(() => {
-      store.config.transitionTime = transitionTime;
+      store.config.transitionTime = fadeSpeed;
       store.config.loaderSpeed = loaderSpeed;
       store.config.waitingTime = waitingTime;
-    }, [transitionTime, loaderSpeed, waitingTime, store]);
+    }, [fadeSpeed, loaderSpeed, waitingTime, store]);
     (0, import_react.useEffect)(() => {
+      setMounted(true);
       return store.subscribe(setInternalProgress);
     }, [store]);
     const progress = controlledProgress !== void 0 ? controlledProgress : internalProgress;
@@ -201,7 +216,7 @@ var TopProgress = (0, import_react.forwardRef)(
         onLoaderFinished();
       }
     }, [progress, onLoaderFinished]);
-    if (progress === null) {
+    if (!mounted || progress === null) {
       return null;
     }
     const isGradient = color.includes("gradient(");
@@ -231,7 +246,7 @@ var TopProgress = (0, import_react.forwardRef)(
               width: `${progress}%`,
               height: "100%",
               ...backgroundStyle,
-              transition: `width ${loaderSpeed}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${transitionTime}ms ease`,
+              transition: `width ${loaderSpeed}ms ${easing}, opacity ${fadeSpeed}ms ease`,
               opacity: progress === 100 ? 0 : 1,
               transform: "translateZ(0)",
               ...style
@@ -260,8 +275,84 @@ var TopProgress = (0, import_react.forwardRef)(
   }
 );
 TopProgress.displayName = "TopProgress";
+// src/ProgressProvider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ProgressProvider = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TopProgress, { ...props }),
+    children
+  ] });
+};
+// src/hooks.ts
+var import_react2 = require("react");
+var useAutoProgress = () => {
+  (0, import_react2.useEffect)(() => {
+    startProgress();
+    return () => {
+      finishProgress();
+    };
+  }, []);
+};
+var useRouteProgress = () => {
+  (0, import_react2.useEffect)(() => {
+    const handleAnchorClick = (event) => {
+      const target = event.currentTarget;
+      if (!target.href || target.target === "_blank" || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || target.hasAttribute("download")) {
+        return;
+      }
+      try {
+        const targetUrl = new URL(target.href);
+        const currentUrl = new URL(window.location.href);
+        if (targetUrl.origin === currentUrl.origin && targetUrl.pathname !== currentUrl.pathname) {
+          startProgress();
+        }
+      } catch (err) {
+      }
+    };
+    const handleMutation = () => {
+      const anchors = document.querySelectorAll("a[href]");
+      anchors.forEach((anchor) => {
+        anchor.removeEventListener("click", handleAnchorClick);
+        anchor.addEventListener("click", handleAnchorClick);
+      });
+    };
+    const mutationObserver = new MutationObserver(handleMutation);
+    mutationObserver.observe(document.body, { childList: true, subtree: true });
+    handleMutation();
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+    window.history.pushState = function(...args) {
+      finishProgress();
+      return originalPushState.apply(this, args);
+    };
+    window.history.replaceState = function(...args) {
+      finishProgress();
+      return originalReplaceState.apply(this, args);
+    };
+    const handlePopState = () => {
+      finishProgress();
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      mutationObserver.disconnect();
+      const anchors = document.querySelectorAll("a[href]");
+      anchors.forEach((anchor) => {
+        anchor.removeEventListener("click", handleAnchorClick);
+      });
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, []);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ProgressProvider,
   TopProgress,
   completeProgress,
   continuousStart,
@@ -269,8 +360,11 @@ TopProgress.displayName = "TopProgress";
   finishProgress,
   getProgress,
   increaseProgress,
+  resetProgress,
   setProgress,
   startProgress,
   staticStart,
+  useAutoProgress,
+  useRouteProgress,
   withProgress
 });

package/dist/index.mjs CHANGED Viewed

@@ -66,6 +66,11 @@ var ProgressStore = class {
       this.notify();
     }, this.config.waitingTime);
   }
+  reset() {
+    this.cleanup();
+    this.value = null;
+    this.notify();
+  }
   set(value) {
     this.cleanup();
     this.value = value;
@@ -109,6 +114,7 @@ var increaseProgress = (value) => progressStore.increase(value);
 var decreaseProgress = (value) => progressStore.decrease(value);
 var getProgress = () => progressStore.getProgress();
 var setProgress = (value) => progressStore.set(value);
+var resetProgress = () => progressStore.reset();
 var withProgress = async (promise) => {
   startProgress();
   try {
@@ -126,16 +132,18 @@ import { jsx } from "react/jsx-runtime";
 var TopProgress = forwardRef(
   ({
     progress: controlledProgress,
-    color = "red",
+    color = "#29D",
     shadow = true,
-    height = 2,
+    height = 3,
     background = "transparent",
     style,
     containerStyle,
     shadowStyle,
-    transitionTime = 300,
+    transitionTime,
+    transitionSpeed = 200,
     loaderSpeed = 500,
     waitingTime = 1e3,
+    easing = "cubic-bezier(0.4, 0, 0.2, 1)",
     className,
     containerClassName,
     onLoaderFinished,
@@ -147,6 +155,7 @@ var TopProgress = forwardRef(
     const [internalProgress, setInternalProgress] = useState(
       store.getValue()
     );
+    const [mounted, setMounted] = useState(false);
     useImperativeHandle(ref, () => ({
       start: (type) => store.start(type),
       continuousStart: (s, r) => store.continuousStart(s, r),
@@ -157,12 +166,14 @@ var TopProgress = forwardRef(
       getProgress: () => store.getProgress(),
       set: (v) => store.set(v)
     }));
+    const fadeSpeed = transitionTime !== void 0 ? transitionTime : transitionSpeed;
     useEffect(() => {
-      store.config.transitionTime = transitionTime;
+      store.config.transitionTime = fadeSpeed;
       store.config.loaderSpeed = loaderSpeed;
       store.config.waitingTime = waitingTime;
-    }, [transitionTime, loaderSpeed, waitingTime, store]);
+    }, [fadeSpeed, loaderSpeed, waitingTime, store]);
     useEffect(() => {
+      setMounted(true);
       return store.subscribe(setInternalProgress);
     }, [store]);
     const progress = controlledProgress !== void 0 ? controlledProgress : internalProgress;
@@ -171,7 +182,7 @@ var TopProgress = forwardRef(
         onLoaderFinished();
       }
     }, [progress, onLoaderFinished]);
-    if (progress === null) {
+    if (!mounted || progress === null) {
       return null;
     }
     const isGradient = color.includes("gradient(");
@@ -201,7 +212,7 @@ var TopProgress = forwardRef(
               width: `${progress}%`,
               height: "100%",
               ...backgroundStyle,
-              transition: `width ${loaderSpeed}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${transitionTime}ms ease`,
+              transition: `width ${loaderSpeed}ms ${easing}, opacity ${fadeSpeed}ms ease`,
               opacity: progress === 100 ? 0 : 1,
               transform: "translateZ(0)",
               ...style
@@ -230,7 +241,83 @@ var TopProgress = forwardRef(
   }
 );
 TopProgress.displayName = "TopProgress";
+// src/ProgressProvider.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ProgressProvider = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(TopProgress, { ...props }),
+    children
+  ] });
+};
+// src/hooks.ts
+import { useEffect as useEffect2 } from "react";
+var useAutoProgress = () => {
+  useEffect2(() => {
+    startProgress();
+    return () => {
+      finishProgress();
+    };
+  }, []);
+};
+var useRouteProgress = () => {
+  useEffect2(() => {
+    const handleAnchorClick = (event) => {
+      const target = event.currentTarget;
+      if (!target.href || target.target === "_blank" || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || target.hasAttribute("download")) {
+        return;
+      }
+      try {
+        const targetUrl = new URL(target.href);
+        const currentUrl = new URL(window.location.href);
+        if (targetUrl.origin === currentUrl.origin && targetUrl.pathname !== currentUrl.pathname) {
+          startProgress();
+        }
+      } catch (err) {
+      }
+    };
+    const handleMutation = () => {
+      const anchors = document.querySelectorAll("a[href]");
+      anchors.forEach((anchor) => {
+        anchor.removeEventListener("click", handleAnchorClick);
+        anchor.addEventListener("click", handleAnchorClick);
+      });
+    };
+    const mutationObserver = new MutationObserver(handleMutation);
+    mutationObserver.observe(document.body, { childList: true, subtree: true });
+    handleMutation();
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+    window.history.pushState = function(...args) {
+      finishProgress();
+      return originalPushState.apply(this, args);
+    };
+    window.history.replaceState = function(...args) {
+      finishProgress();
+      return originalReplaceState.apply(this, args);
+    };
+    const handlePopState = () => {
+      finishProgress();
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      mutationObserver.disconnect();
+      const anchors = document.querySelectorAll("a[href]");
+      anchors.forEach((anchor) => {
+        anchor.removeEventListener("click", handleAnchorClick);
+      });
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, []);
+};
 export {
+  ProgressProvider,
   TopProgress,
   completeProgress,
   continuousStart,
@@ -238,8 +325,11 @@ export {
   finishProgress,
   getProgress,
   increaseProgress,
+  resetProgress,
   setProgress,
   startProgress,
   staticStart,
+  useAutoProgress,
+  useRouteProgress,
   withProgress
 };

package/package.json CHANGED Viewed

@@ -1,7 +1,15 @@
 {
   "name": "react-top-progress",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "description": "A lightweight modern top loading progress bar for React",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/harrymate22/react-top-progress.git"
+  },
+  "homepage": "https://github.com/harrymate22/react-top-progress",
+  "bugs": {
+    "url": "https://github.com/harrymate22/react-top-progress/issues"
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",