react-top-progress 1.0.3 → 1.0.4
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.
- package/README.md +40 -1
- package/package.json +20 -5
package/README.md
CHANGED
|
@@ -15,6 +15,14 @@ Perfect for Next.js App Router, Vite, and standard SPA architectures.
|
|
|
15
15
|
- **Performant**: Uses `transform: translateZ(0)` hardware acceleration and `cubic-bezier` CSS transitions.
|
|
16
16
|
- **TypeScript ready**: Full types included.
|
|
17
17
|
|
|
18
|
+
## 🚀 Why react-top-progress?
|
|
19
|
+
|
|
20
|
+
- **SSR & App Router Safe**: Fully compatible with Next.js SSR & App Router natively
|
|
21
|
+
- **Framework Agnostic**: Works perfectly in React, Vite, CRA, Remix
|
|
22
|
+
- **0 Dependencies**: No weird transitive bloat
|
|
23
|
+
- **📦 Tiny Bundle Size**: ~1.8kb gzipped
|
|
24
|
+
- **Premium Aesthetics**: Smooth realistic loading animation with beautiful gradients & glows
|
|
25
|
+
|
|
18
26
|
## Installation
|
|
19
27
|
|
|
20
28
|
```bash
|
|
@@ -29,7 +37,27 @@ pnpm add react-top-progress
|
|
|
29
37
|
bun add react-top-progress
|
|
30
38
|
```
|
|
31
39
|
|
|
32
|
-
##
|
|
40
|
+
## Next.js Usage (App Router)
|
|
41
|
+
|
|
42
|
+
Because Next.js App Router removed native router events, you can manually construct a robust loader globally right in your `layout.tsx`.
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
"use client";
|
|
46
|
+
|
|
47
|
+
import { TopProgress, startProgress, finishProgress } from "react-top-progress";
|
|
48
|
+
|
|
49
|
+
export default function Layout({ children }) {
|
|
50
|
+
return (
|
|
51
|
+
<>
|
|
52
|
+
<TopProgress />
|
|
53
|
+
{/* Your Top Nav, Sidebar, etc. */}
|
|
54
|
+
{children}
|
|
55
|
+
</>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Standard Quick Start
|
|
33
61
|
|
|
34
62
|
At the top level of your application (like Next.js `app/layout.jsx` or Vite `src/App.jsx`), render the component.
|
|
35
63
|
Works flawlessly in both **JSX** and **TSX**!
|
|
@@ -107,6 +135,17 @@ You can customize `<TopProgress />` passing any of the following props:
|
|
|
107
135
|
| `containerClassName` | `string` | | Custom CSS class applied onto the wrapper container. |
|
|
108
136
|
| `onLoaderFinished` | `() => void` | | A callback function executing precisely when the loader fully hits 100% max width. |
|
|
109
137
|
|
|
138
|
+
## Compared to Alternatives
|
|
139
|
+
|
|
140
|
+
Developers need to know why to switch. Here is the breakdown:
|
|
141
|
+
|
|
142
|
+
| Library | Dependencies | SSR Safe | Bundle Size |
|
|
143
|
+
| ----------------------- | ---------------------- | -------- | ----------------- |
|
|
144
|
+
| `nprogress` | Old jQuery style logic | No | Larger |
|
|
145
|
+
| `nextjs-toploader` | Next-specific only | Yes | Medium |
|
|
146
|
+
| `react-top-loading-bar` | React mostly | Some | Medium |
|
|
147
|
+
| **react-top-progress** | **0 dependencies** | **Yes** | **Tiny (~1.8kb)** |
|
|
148
|
+
|
|
110
149
|
## Credits
|
|
111
150
|
|
|
112
151
|
Designed for the modern web. Inspired by the classic `nprogress` and Next.js' `nextjs-toploader`. Ideal when you need explicit control without relying solely on framework routing events.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-top-progress",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "A lightweight modern top loading progress bar for React",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -11,10 +11,25 @@
|
|
|
11
11
|
],
|
|
12
12
|
"keywords": [
|
|
13
13
|
"react",
|
|
14
|
-
"
|
|
15
|
-
"loader",
|
|
16
|
-
"
|
|
17
|
-
"
|
|
14
|
+
"nextjs",
|
|
15
|
+
"nextjs loader",
|
|
16
|
+
"ssr progress bar",
|
|
17
|
+
"top loading bar",
|
|
18
|
+
"route progress",
|
|
19
|
+
"react progress bar",
|
|
20
|
+
"nextjs app router loader",
|
|
21
|
+
"lightweight loader",
|
|
22
|
+
"modern progress bar",
|
|
23
|
+
"nprogress",
|
|
24
|
+
"vite loader",
|
|
25
|
+
"react top loading bar",
|
|
26
|
+
"loading bar",
|
|
27
|
+
"page transition",
|
|
28
|
+
"progress indicator",
|
|
29
|
+
"react-router loader",
|
|
30
|
+
"remix loader",
|
|
31
|
+
"next14 loader",
|
|
32
|
+
"next15 loader"
|
|
18
33
|
],
|
|
19
34
|
"author": "Harry Mate",
|
|
20
35
|
"license": "MIT",
|