Skip to content

Commit 5120e54

Browse files
TheSGJTheSGJ
authored
Merge branch 'master' into clean-up-deps
2 parents b8b34a9 + ece3ac9 commit 5120e54

File tree

12 files changed

+2962
-853
lines changed

12 files changed

+2962
-853
lines changed

‎.github/FUNDING.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
# These are supported funding platforms
22

33
github: thesgj
4+
custom: ['https://www.buymeacoffee.com/thesgj']

‎.github/workflows/build-deploy.yml‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
name: Publish nextjs-toploader to npmjs & jsr.io
2+
on:
3+
release:
4+
types: [published]
5+
jobs:
6+
build:
7+
runs-on: ubuntu-latest
8+
9+
permissions:
10+
contents: write
11+
id-token: write
12+
13+
steps:
14+
- name: Checkout Repository
15+
uses: actions/checkout@v4
16+
17+
- name: Find yarn cache location
18+
id: yarn-cache
19+
run: echo "::set-output name=dir::$(yarn cache dir)"
20+
21+
- name: JS package cache
22+
uses: actions/cache@v1
23+
with:
24+
path: $(( steps.yarn-cache.outputs.dir ))
25+
key: $(( runner.os ))-yarn-$(( hashFiles('**/yarn.lock') ))
26+
restore-keys: |
27+
$(( runner.os ))-yarn-
28+
29+
- name: Install Dependencies
30+
run: yarn install
31+
32+
- name: Compile the Library
33+
run: yarn build-lib
34+
# Setup .npmrc file to publish to npm
35+
- name: Setup the node
36+
uses: actions/setup-node@v4
37+
with:
38+
node-version: '20.11.1'
39+
registry-url: 'https://registry.npmjs.org'
40+
- name: Publish nextjs-toploader on npm
41+
run: npm publish --access public --provenance
42+
continue-on-error: true
43+
env:
44+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
45+
46+
- name: Delete Current README.md
47+
run: rm README.md
48+
49+
- name: Modify README for JSR.io
50+
run: mv JSR.md README.md
51+
52+
- name: Move index.d.ts in src directory for JSR
53+
run: cp dist/index.d.ts src/
54+
55+
- name: Add Use Client line
56+
run: sed -i '1s/^/\"use client\";/' src/index.tsx
57+
58+
- name: Install Deno
59+
run: curl -fsSL https://deno.land/install.sh | sh
60+
61+
- name: Publish JSR package using Deno
62+
run: /home/runner/.deno/bin/deno publish --allow-slow-types --allow-dirty

‎CHANGELOG.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,74 @@
6262
### Fixed
6363

6464
- Fixed spelling for increment. And updated the README.
65+
66+
## v1.5.3
67+
68+
### Added
69+
70+
- Added template option
71+
- Added the provision to configure z index via props
72+
73+
### Fixed
74+
75+
- Fixed loader infinity when press control click
76+
- Fixed Unexpected symbol "?" on Safari 12.1 by adding es6 as target
77+
- Fixed the loader when href is empty
78+
- Fixed the loader for new URL starts with "blob:"
79+
80+
## v1.6.3
81+
82+
### Added
83+
84+
- Added a feature to show the TopLoader at bottom.
85+
86+
## v1.6.4
87+
88+
### Fixed
89+
90+
- Fixed the spinner top and bottom margin
91+
92+
## v1.6.5
93+
94+
### Fixed
95+
96+
- Fixed the loader when using CMD + Click in macOS
97+
98+
## v1.6.6
99+
100+
### Fixed
101+
102+
- Fixed the TopLoader to work with special schemes such as mailto, sms, tel, etc
103+
- Fixed the TopLoader for "#" hash anchor
104+
105+
## v1.6.9
106+
107+
### Fixed
108+
109+
- Resolve progress bar when navigating back from external page
110+
- Fixed the TopLoader for anchor url having other domain name
111+
- Moved histry.pushState function outside the MouseEvent, it was triggering for every mouse click
112+
- Fixed TopLoader getting stuck on popstate events
113+
- Fixed the use of rest params and passing its type as any
114+
- Fixed for all Special Schemes, TopLoader will not run on special schemes now onwards
115+
- Fixed for shift key and alt key
116+
117+
### Updated
118+
119+
- Added Type declarations for few functions
120+
- Refactor the whole code to make it more readable
121+
- Updated to add support for the JSR Package Manager
122+
- Updated to version 1.6.9 to avoid version gap for JSR
123+
124+
## v1.6.10
125+
126+
### Fixed
127+
128+
- Fix npm-publish.yml for gh actions to publish with provenance
129+
130+
## v1.6.11
131+
132+
### Fixed
133+
134+
- Fix to add use client in jsr usage with nextjs
135+
- Update README about support for React

‎JSR.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
# Next Js TopLoader
2+
3+
- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.
4+
5+
[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/nextjs-toploader)
6+
[![NPM Downloads](https://img.shields.io/npm/dm/nextjs-toploader?&style=flat-square)](https://www.npmjs.com/package/nextjs-toploader)
7+
[![JSR](https://jsr.io/badges/@thesgj/nextjs-toploader)](https://jsr.io/badges/@thesgj/nextjs-toploader)
8+
9+
For using npm package manager instead see: (https://www.npmjs.com/package/nextjs-toploader)
10+
11+
## Install
12+
13+
using jsr with npm:
14+
15+
```bash
16+
npx jsr add @thesgj/nextjs-toploader
17+
```
18+
19+
using jsr with yarn:
20+
21+
```bash
22+
yarn dlx jsr add @thesgj/nextjs-toploader
23+
```
24+
25+
using deno:
26+
27+
```bash
28+
deno add @thesgj/nextjs-toploader
29+
```
30+
31+
## Usage
32+
33+
import using:
34+
35+
```js
36+
import NextTopLoader from '@thesgj/nextjs-toploader';
37+
```
38+
39+
### Usage with `app/layout.js` for `app` folder structure
40+
41+
For rendering add `<NextTopLoader />` to your `return()` inside the `<body></body>` of `RootLayout()`:
42+
43+
```js
44+
import NextTopLoader from '@thesgj/nextjs-toploader';
45+
46+
export default function RootLayout({ children }) {
47+
return (
48+
<html lang="en">
49+
<body>
50+
<NextTopLoader />
51+
{children}
52+
</body>
53+
</html>
54+
);
55+
}
56+
```
57+
58+
### Usage with `pages/_app.js` for `pages` folder structure
59+
60+
For rendering add `<NextTopLoader />` to your `return()` in `MyApp()`:
61+
62+
```js
63+
import NextTopLoader from '@thesgj/nextjs-toploader';
64+
65+
export default function MyApp({ Component, pageProps }) {
66+
return (
67+
<>
68+
<NextTopLoader />
69+
<Component {...pageProps} />;
70+
</>
71+
);
72+
}
73+
```
74+
75+
### Usage with React, Vite React or any other React Based Framework
76+
77+
For rendering add `<NextTopLoader />` to your `return()` inside the <Router><Router/> component in `App()` in your App.js:
78+
79+
80+
```js
81+
import NextTopLoader from '@thesgj/nextjs-toploader';
82+
const App = () => {
83+
return (
84+
<div>
85+
<Router>
86+
<NextTopLoader />
87+
<Routes>
88+
{/* Your Routes Here */}
89+
</Routes>
90+
</Router>
91+
</div>
92+
)
93+
}
94+
95+
export default App;
96+
```
97+
98+
### Default Configuration
99+
100+
If no props are passed to `<NextTopLoader />`, below is the default configuration applied.
101+
102+
```jsx
103+
<NextTopLoader
104+
color="#2299DD"
105+
initialPosition={0.08}
106+
crawlSpeed={200}
107+
height={3}
108+
crawl={true}
109+
showSpinner={true}
110+
easing="ease"
111+
speed={200}
112+
shadow="0 0 10px #2299DD,0 0 5px #2299DD"
113+
template='<div class="bar" role="bar"><div class="peg"></div></div>
114+
<div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
115+
zIndex={1600}
116+
showAtBottom={false}
117+
/>
118+
```
119+
120+
- `color`: to change the default color of TopLoader.
121+
- `initialPosition`: to change initial position for the TopLoader in percentage, : `0.08 = 8%`.
122+
- `crawlSpeed`: increment delay speed in `ms`.
123+
- `speed`: animation speed for the TopLoader in `ms`
124+
- `easing`: animation settings using easing (a CSS easing string).
125+
- `height`: height of TopLoader in `px`.
126+
- `crawl`: auto incrementing behavior for the TopLoader.
127+
- `showSpinner`: to show spinner or not.
128+
- `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it)
129+
- `template`: to include custom HTML attributes for the TopLoader.
130+
- `zIndex`: defines zIndex for the TopLoader.
131+
- `showAtBottom`: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)
132+
133+
---
134+
135+
UPI ID: thesgj@sbi
136+
137+
[![Sponsor me on GitHub](https://img.shields.io/badge/Sponsor%20me%20on-GitHub-brightgreen)](https://github.com/sponsors/TheSGJ)
138+
139+
[!["Buy Me A Coffee"](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/thesgj)

‎README.md‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Next Js TopLoader
22

3-
- A Next.js Top Loading Bar component made using nprogress, works with Next.js 13.
3+
- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.
4+
5+
[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/nextjs-toploader)
6+
[![NPM Downloads](https://img.shields.io/npm/dm/nextjs-toploader?&style=flat-square)](https://www.npmjs.com/package/nextjs-toploader)
47

58
## Install
69

@@ -60,6 +63,28 @@ export default function MyApp({ Component, pageProps }) {
6063
}
6164
```
6265

66+
### Usage with React, Vite React or any other React Based Framework
67+
68+
For rendering add `<NextTopLoader />` to your `return()` inside the <Router><Router/> component in `App()` in your App.js:
69+
70+
```js
71+
import NextTopLoader from 'nextjs-toploader';
72+
const App = () => {
73+
return (
74+
<div>
75+
<Router>
76+
<NextTopLoader />
77+
<Routes>
78+
{/* Your Routes Here */}
79+
</Routes>
80+
</Router>
81+
</div>
82+
)
83+
}
84+
85+
export default App;
86+
```
87+
6388
### Default Configuration
6489

6590
If no props are passed to `<NextTopLoader />`, below is the default configuration applied.
@@ -75,6 +100,10 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
75100
easing="ease"
76101
speed={200}
77102
shadow="0 0 10px #2299DD,0 0 5px #2299DD"
103+
template='<div class="bar" role="bar"><div class="peg"></div></div>
104+
<div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
105+
zIndex={1600}
106+
showAtBottom={false}
78107
/>
79108
```
80109

@@ -87,7 +116,14 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
87116
- `crawl`: auto incrementing behavior for the TopLoader.
88117
- `showSpinner`: to show spinner or not.
89118
- `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it)
119+
- `template`: to include custom HTML attributes for the TopLoader.
120+
- `zIndex`: defines zIndex for the TopLoader.
121+
- `showAtBottom`: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)
122+
123+
---
124+
125+
UPI ID: thesgj@sbi
90126

91127
[![Sponsor me on GitHub](https://img.shields.io/badge/Sponsor%20me%20on-GitHub-brightgreen)](https://github.com/sponsors/TheSGJ)
92128

93-
[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/thesgj)
129+
[!["Buy Me A Coffee"](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/thesgj)

‎deno.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
declare namespace JSX {
3+
interface Element {
4+
// deno-lint-ignore no-explicit-any
5+
[elemName: string]: any;
6+
}
7+
}

‎deno.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "@thesgj/nextjs-toploader",
3+
"version": "1.6.11",
4+
"exports": "./src/index.tsx",
5+
"compilerOptions": {
6+
"jsx": "react-jsx",
7+
"jsxImportSource": "npm:preact",
8+
"types": ["./src/index.d.ts", "./deno.d.ts"]
9+
},
10+
"lib": ["dom", "dom.iterable", "esnext"],
11+
"imports": { "preact": "npm:preact@^10.19.7" }
12+
}

0 commit comments

Comments
 (0)