@vctqs1/nav-progress-bar 0.1.0 → 0.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.
- package/README.md +19 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,12 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
A zero-dependency, CSP-safe top-of-page progress bar built as a native Web Component. Works in any framework — or no framework at all.
|
|
4
4
|
|
|
5
|
+
> Live demo: https://nav-progress-p0gw9z3lf-vctqs1s-projects.vercel.app/
|
|
6
|
+
|
|
7
|
+
> Demo video:
|
|
8
|
+
|
|
9
|
+
<video src="https://github.com/user-attachments/assets/4144ed95-8c25-4aa9-b804-905ac24805b4" controls width="100%"></video>
|
|
10
|
+
|
|
5
11
|
> Originally built to solve the [Next.js App Router `loading.js` dead gap](https://github.com/vercel/next.js/issues/43548), but the underlying mechanism (the browser [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API)) works anywhere.
|
|
6
12
|
|
|
13
|
+
> If you use Next.js App Router, this is the missing feedback layer before `loading.js` renders.
|
|
14
|
+
|
|
7
15
|
## Table of Contents
|
|
8
16
|
|
|
9
17
|
- [Features](#features)
|
|
10
18
|
- [Installation](#installation)
|
|
19
|
+
- [Packages](#packages)
|
|
11
20
|
- [Quick Start](#quick-start)
|
|
12
21
|
- [Next.js App Router](#nextjs-app-router)
|
|
13
22
|
- [Nuxt](#nuxt)
|
|
@@ -42,6 +51,14 @@ pnpm add @vctqs1/nav-progress-bar
|
|
|
42
51
|
yarn add @vctqs1/nav-progress-bar
|
|
43
52
|
```
|
|
44
53
|
|
|
54
|
+
## Packages
|
|
55
|
+
|
|
56
|
+
| Package | Description |
|
|
57
|
+
|---------|-------------|
|
|
58
|
+
| [`@vctqs1/nav-progress-bar`](https://www.npmjs.com/package/@vctqs1/nav-progress-bar) | Core Web Component — zero dependencies, framework-agnostic. Use this directly for vanilla HTML or non-React frameworks. |
|
|
59
|
+
| [`@vctqs1/nav-progress-bar-react`](https://www.npmjs.com/package/@vctqs1/nav-progress-bar-react) | React wrapper with SSR support and JSX types. Use this for React and especially Next.js App Router. |
|
|
60
|
+
|
|
61
|
+
|
|
45
62
|
## Quick Start
|
|
46
63
|
|
|
47
64
|
Pick your framework below. For most SPA routers the Navigation API fires automatically after `registerNavProgressBar()` — no extra wiring needed. If you need to force a manual start signal, see [Manual start (non-Next.js)](#manual-start-non-nextjs) below.
|
|
@@ -50,6 +67,8 @@ Pick your framework below. For most SPA routers the Navigation API fires automat
|
|
|
50
67
|
|
|
51
68
|
The bar solves the `loading.js` dead gap — the frozen period between a user clicking a link and any loading feedback appearing. See [Next.js issue #43548](https://github.com/vercel/next.js/issues/43548).
|
|
52
69
|
|
|
70
|
+
This is the primary use case: start the bar on route departure, then let it finish automatically when the new App Router page commits.
|
|
71
|
+
|
|
53
72
|
**1. Add the React wrapper** (handles SSR rendering):
|
|
54
73
|
|
|
55
74
|
```bash
|
|
@@ -88,18 +107,6 @@ export function onRouterTransitionStart(
|
|
|
88
107
|
}
|
|
89
108
|
```
|
|
90
109
|
|
|
91
|
-
**4. Enable instrumentation** in `next.config.ts`:
|
|
92
|
-
|
|
93
|
-
```ts
|
|
94
|
-
const nextConfig = {
|
|
95
|
-
experimental: {
|
|
96
|
-
instrumentationHook: true,
|
|
97
|
-
},
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
export default nextConfig;
|
|
101
|
-
```
|
|
102
|
-
|
|
103
110
|
How the bar completes without a "done" callback — Next.js calls `history.pushState()` to update the URL, which fires the browser `navigatesuccess` event as a side effect. The web component listens for this internally and calls `finish()` automatically.
|
|
104
111
|
|
|
105
112
|
```
|
|
@@ -113,9 +120,6 @@ User clicks <Link>
|
|
|
113
120
|
|
|
114
121
|
> 🎬 **Demo** — [watch the bar in action with Next.js App Router →](https://github.com/vctqs1/nav-progress-bar#nextjs-app-router)
|
|
115
122
|
|
|
116
|
-
|
|
117
|
-
<video src="https://github.com/user-attachments/assets/4144ed95-8c25-4aa9-b804-905ac24805b4" controls width="100%"></video>
|
|
118
|
-
|
|
119
123
|
---
|
|
120
124
|
|
|
121
125
|
### Nuxt
|