diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index d3eb82e..240bfc9 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,4 +1,6 @@
# These are supported funding platforms
github: thesgj
-custom: ['https://www.buymeacoffee.com/thesgj']
+thanks_dev: thesgj
+buy_me_a_coffee: thesgj
+open_collective: nextjs-toploader
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
index b2fa40a..81e29fb 100644
--- a/.github/workflows/build-deploy.yml
+++ b/.github/workflows/build-deploy.yml
@@ -52,9 +52,6 @@ jobs:
- name: Move index.d.ts in src directory for JSR
run: cp dist/index.d.ts src/
- - name: Add Use Client line
- run: sed -i '1s/^/\"use client\";/' src/index.tsx
-
- name: Install Deno
run: curl -fsSL https://deno.land/install.sh | sh
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97273c3..7d16ae5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -138,5 +138,17 @@
### Fixed
-- Fixed indefinite animation when replacing current route
-- Moved @types/nprogress into devDependencies
\ No newline at end of file
+- Fixed indefinite animation when replacing current route
+- Moved @types/nprogress into devDependencies
+
+## v2.6.12
+
+### Added (major changes)
+
+- Added PagesTopLoader Component to make useRouter hook supported in pages router
+
+- Added custom useRouter hook to trigger TopLoader for app router
+
+### Updated
+
+- Updated README.md Documentation made it more readable.
diff --git a/JSR.md b/JSR.md
index c1455d3..1ae327f 100644
--- a/JSR.md
+++ b/JSR.md
@@ -2,30 +2,30 @@
- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.
-[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/nextjs-toploader)
-[![NPM Downloads](https://img.shields.io/npm/dm/nextjs-toploader?&style=flat-square)](https://www.npmjs.com/package/nextjs-toploader)
-[![JSR](https://jsr.io/badges/@thesgj/nextjs-toploader)](https://jsr.io/badges/@thesgj/nextjs-toploader)
+[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/@thesgj/nextjs-toploader)
+[![NPM Downloads](https://img.shields.io/npm/dm/@thesgj/nextjs-toploader?&style=flat-square)](https://www.npmjs.com/package/@thesgj/nextjs-toploader)
+[![JSR](https://jsr.io/badges/@thesgj/@thesgj/nextjs-toploader)](https://jsr.io/badges/@thesgj/@thesgj/nextjs-toploader)
-For using npm package manager instead see: (https://www.npmjs.com/package/nextjs-toploader)
+For using npm package manager instead see: (https://www.npmjs.com/package/@thesgj/nextjs-toploader)
## Install
using jsr with npm:
```bash
-npx jsr add @thesgj/nextjs-toploader
+npx jsr add @thesgj/@thesgj/nextjs-toploader
```
using jsr with yarn:
```bash
-yarn dlx jsr add @thesgj/nextjs-toploader
+yarn dlx jsr add @thesgj/@thesgj/nextjs-toploader
```
using deno:
```bash
-deno add @thesgj/nextjs-toploader
+deno add @thesgj/@thesgj/nextjs-toploader
```
## Usage
@@ -57,40 +57,77 @@ export default function RootLayout({ children }) {
### Usage with `pages/_app.js` for `pages` folder structure
-For rendering add `` to your `return()` in `MyApp()`:
+For rendering add `` to your `return()` in `MyApp()` (Recommended):
```js
-import NextTopLoader from '@thesgj/nextjs-toploader';
+import { PagesTopLoader } from '@thesgj/nextjs-toploader';
export default function MyApp({ Component, pageProps }) {
return (
<>
-
+ ;
>
);
}
```
+You can also use `` in `pages` router, but it's recommended to use `` for `useRouter` hook support from `@thesgj/nextjs-toploader` version 2.6.12 onwards
+
+## Compatibility with `useRouter` hook
+
+### `useRouter` hook usage with `app/layout.js` for `app` folder structure
+
+For triggering TopLoader when using `useRouter` hook (app router):
+
+```js
+// Import the useRouter hook from @thesgj/nextjs-toploader to trigger the TopLoader
+
+import { useRouter } from '@thesgj/nextjs-toploader';
+```
+
+Then simply use it in your code for example:
+
+```js
+const router = useRouter();
+router.push('/some-page');
+```
+
+### `useRouter` hook usage with `pages/_app.js` for `pages` folder structure
+
+For triggering TopLoader when using `useRouter` add `` to your `return()` in `MyApp()` :
+
+```js
+import { PagesTopLoader } from '@thesgj/nextjs-toploader';
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+ <>
+
+ ;
+ >
+ );
+}
+```
+
+---
+
### Usage with React, Vite React or any other React Based Framework
For rendering add `` to your `return()` inside the component in `App()` in your App.js:
-
```js
import NextTopLoader from '@thesgj/nextjs-toploader';
const App = () => {
return (
-
-
-
- {/* Your Routes Here */}
-
-
+
+
+ {/* Your Routes Here */}
+
- )
-}
+ );
+};
export default App;
```
@@ -130,10 +167,47 @@ If no props are passed to ``, below is the default configuratio
- `zIndex`: defines zIndex for the TopLoader.
- `showAtBottom`: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)
+#### `NextTopLoaderProps` (props passed to the TopLoader)
+
+| **Name** | **Type** | **Default Value** |
+| ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `color` | `string` | `"#29d"` |
+| `initialPosition` | `number` | `0.08` |
+| `crawlSpeed` | `number` | `200` |
+| `height` | `number` | `3` |
+| `crawl` | `boolean` | `true` |
+| `showSpinner` | `boolean` | `true` |
+| `easing` | `string` | `"ease"` |
+| `speed` | `number` | `200` |
+| `shadow` | `string \| false` | `"0 0 10px ${color}, 0 0 5px ${color}"` |
+| `template` | `string` | `"
"` |
+| `zIndex` | `number` | `1600` |
+| `showAtBottom` | `boolean` | `false` |
+
+## Contributors
+
+### Code Contributors
+
+This project was made possible thanks to the contributions of its code contributors.
+
+
+
+### Financial Contributors
+
+We extend a huge thanks to our financial contributor for helping us sustain this community
+
+
+
+
+
---
-UPI ID: thesgj@sbi
+Support this project with your organization. Your logo will show up here with a link to your website. You can Support this project on Open Collective or Equivalent Method from the below
+
+UPI ID: thesgj@upi (International UPI ID)
[![Sponsor me on GitHub](https://img.shields.io/badge/Sponsor%20me%20on-GitHub-brightgreen)](https://github.com/sponsors/TheSGJ)
[!["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)
+
+[![OpenCollective](https://opencollective.com/webpack/donate/button.png?color=blue)](https://opencollective.com/@thesgj/nextjs-toploader)
diff --git a/README.md b/README.md
index 23f2604..842ea24 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Next Js TopLoader
+# Next Js TopLoader
- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.
@@ -48,21 +48,61 @@ export default function RootLayout({ children }) {
### Usage with `pages/_app.js` for `pages` folder structure
-For rendering add `` to your `return()` in `MyApp()`:
+For rendering add `` to your `return()` in `MyApp()` (Recommended):
```js
-import NextTopLoader from 'nextjs-toploader';
+import { PagesTopLoader } from 'nextjs-toploader';
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+ <>
+
+ ;
+ >
+ );
+}
+```
+
+You can also use `` in `pages` router, but it's recommended to use `` for `useRouter` hook support from `nextjs-toploader` version 2.6.12 onwards
+
+## Compatibility with `useRouter` hook
+
+### `useRouter` hook usage with `app/layout.js` for `app` folder structure
+
+For triggering TopLoader when using `useRouter` hook (app router):
+
+```js
+// Import the useRouter hook from nextjs-toploader to trigger the TopLoader
+
+import { useRouter } from 'nextjs-toploader';
+```
+
+Then simply use it in your code for example:
+
+```js
+const router = useRouter();
+router.push('/some-page');
+```
+
+### `useRouter` hook usage with `pages/_app.js` for `pages` folder structure
+
+For triggering TopLoader when using `useRouter` add `` to your `return()` in `MyApp()` :
+
+```js
+import { PagesTopLoader } from 'nextjs-toploader';
export default function MyApp({ Component, pageProps }) {
return (
<>
-
+ ;
>
);
}
```
+---
+
### Usage with React, Vite React or any other React Based Framework
For rendering add `` to your `return()` inside the component in `App()` in your App.js:
@@ -72,15 +112,13 @@ import NextTopLoader from 'nextjs-toploader';
const App = () => {
return (
-
-
-
- {/* Your Routes Here */}
-
-
+
+
+ {/* Your Routes Here */}
+
- )
-}
+ );
+};
export default App;
```
@@ -120,10 +158,47 @@ If no props are passed to ``, below is the default configuratio
- `zIndex`: defines zIndex for the TopLoader.
- `showAtBottom`: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)
+#### `NextTopLoaderProps` (props passed to the TopLoader)
+
+| **Name** | **Type** | **Default Value** |
+| ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `color` | `string` | `"#29d"` |
+| `initialPosition` | `number` | `0.08` |
+| `crawlSpeed` | `number` | `200` |
+| `height` | `number` | `3` |
+| `crawl` | `boolean` | `true` |
+| `showSpinner` | `boolean` | `true` |
+| `easing` | `string` | `"ease"` |
+| `speed` | `number` | `200` |
+| `shadow` | `string \| false` | `"0 0 10px ${color}, 0 0 5px ${color}"` |
+| `template` | `string` | `"
"` |
+| `zIndex` | `number` | `1600` |
+| `showAtBottom` | `boolean` | `false` |
+
+## Contributors
+
+### Code Contributors
+
+This project was made possible thanks to the contributions of its code contributors.
+
+
+
+### Financial Contributors
+
+We extend a huge thanks to our financial contributor for helping us sustain this community
+
+
+
+
+
---
-UPI ID: thesgj@sbi
+Support this project with your organization. Your logo will show up here with a link to your website. You can Support this project on Open Collective or Equivalent Method from the below
+
+UPI ID: thesgj@upi (International UPI ID)
[![Sponsor me on GitHub](https://img.shields.io/badge/Sponsor%20me%20on-GitHub-brightgreen)](https://github.com/sponsors/TheSGJ)
[!["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)
+
+[![OpenCollective](https://opencollective.com/webpack/donate/button.png?color=blue)](https://opencollective.com/nextjs-toploader)
diff --git a/package.json b/package.json
index 86ad8e3..e9a3de9 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,17 @@
{
"name": "nextjs-toploader",
- "version": "1.6.12",
+ "version": "2.6.12",
"description": "A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
- "build-lib": "tsup && sed -i '1s/^/\"use client\";/' dist/index.js",
+ "build-lib": "tsup",
"lint": "eslint --fix --cache src/",
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
"typecheck": "tsc -p tsconfig.json"
},
"funding": {
- "url": "https://github.com/sponsors/TheSGJ"
+ "url": "https://buymeacoffee.com/thesgj"
},
"repository": {
"type": "git",
diff --git a/src/PagesTopLoader.tsx b/src/PagesTopLoader.tsx
new file mode 100644
index 0000000..6d69431
--- /dev/null
+++ b/src/PagesTopLoader.tsx
@@ -0,0 +1,97 @@
+// deno-ts-ignore-file
+// deno-lint-ignore-file
+/* eslint-disable no-var */
+/* eslint-disable max-len */
+/* eslint-disable prefer-const */
+
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+import * as NProgress from 'nprogress';
+import { NextTopLoaderProps } from '.';
+import Router from 'next/router';
+export const PagesTopLoader = ({
+ color: propColor,
+ height: propHeight,
+ showSpinner,
+ crawl,
+ crawlSpeed,
+ initialPosition,
+ easing,
+ speed,
+ shadow,
+ template,
+ zIndex = 1600,
+ showAtBottom = false,
+}: NextTopLoaderProps): JSX.Element => {
+ const defaultColor = '#29d';
+ const defaultHeight = 3;
+
+ const color = propColor ?? defaultColor;
+ const height = propHeight ?? defaultHeight;
+
+ // Any falsy (except undefined) will disable the shadow
+ const boxShadow =
+ !shadow && shadow !== undefined
+ ? ''
+ : shadow
+ ? `box-shadow:${shadow}`
+ : `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
+
+ // Check if to show at bottom
+ const positionStyle = showAtBottom ? 'bottom: 0;' : 'top: 0;';
+ const spinnerPositionStyle = showAtBottom ? 'bottom: 15px;' : 'top: 15px;';
+
+ /**
+ * CSS Styles for the NextTopLoader
+ */
+ const styles = (
+
+ );
+
+ React.useEffect((): ReturnType => {
+ NProgress.configure({
+ showSpinner: showSpinner ?? true,
+ trickle: crawl ?? true,
+ trickleSpeed: crawlSpeed ?? 200,
+ minimum: initialPosition ?? 0.08,
+ easing: easing ?? 'ease',
+ speed: speed ?? 200,
+ template:
+ template ??
+ '