Gathering detailed insights and metrics for mentoredy_nextjs-toploader
Gathering detailed insights and metrics for mentoredy_nextjs-toploader
A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 , Next.js 13 and React.
1.0.0
MIT
TypeScript
51.74 kB
Installations
npm install mentoredy_nextjs-toploaderDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.14.0
NPM Version
10.7.0
Releases
Unable to fetch releases
Languages
3
TypeScript
CSS
JavaScript
TypeScript (77.76%)
CSS (14.01%)
JavaScript (8.23%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
112 Commits
1 Forks
3 Branches
1 Contributors
Updated on Feb 26, 2025
Sponsor this package
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
mentoredy_nextjs-toploader@1.0.0
Unpacked Size
51.74 kB
Size
13.83 kB
File Count
12
NPM Version
10.7.0
Node Version
20.14.0
Published on
Feb 26, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Next Js TopLoader
- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.
Install
using npm:
1npm install nextjs-toploader
using yarn:
1yarn add nextjs-toploader
Usage
import using:
1import NextTopLoader from 'nextjs-toploader';
Usage with app/layout.js for app folder structure
For rendering add <NextTopLoader /> to your return() inside the <body></body> of RootLayout():
1import NextTopLoader from 'nextjs-toploader'; 2 3export default function RootLayout({ children }) { 4 return ( 5 <html lang="en"> 6 <body> 7 <NextTopLoader /> 8 {children} 9 </body> 10 </html> 11 ); 12}
Usage with pages/_app.js for pages folder structure
For rendering add <PagesTopLoader /> to your return() in MyApp() (Recommended):
1import { PagesTopLoader } from 'nextjs-toploader/pages'; 2 3export default function MyApp({ Component, pageProps }) { 4 return ( 5 <> 6 <PagesTopLoader /> 7 <Component {...pageProps} />; 8 </> 9 ); 10}
You can also use <NextTopLoader /> in pages router, but it's recommended to use <PagesTopLoader /> 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):
1// Import the useRouter hook from nextjs-toploader to trigger the TopLoader 2 3import { useRouter } from 'nextjs-toploader/app';
Then simply use it in your code for example:
1const router = useRouter(); 2router.push('/some-page');
useRouter hook usage with pages/_app.js for pages folder structure
For triggering TopLoader when using useRouter add <PagesTopLoader /> to your return() in MyApp() :
1import { PagesTopLoader } from 'nextjs-toploader/pages'; 2 3export default function MyApp({ Component, pageProps }) { 4 return ( 5 <> 6 <PagesTopLoader /> 7 <Component {...pageProps} />; 8 </> 9 ); 10}
useTopLoader Hook
A custom hook for handling progress indicators using NextTopLoader.
Methods
| Name | Description |
|---|---|
| start | Starts the progress bar |
| done | Completes the progress bar. Can be forced to complete immediately with an optional force parameter |
| remove | Removes the progress bar element from the DOM |
| setProgress | Manually sets the progress value (between 0.0 and 1.0) |
| inc | Increments the progress bar by a specified amount. If no amount is specified, it makes a small automatic increment |
| trickle | Adds small random increments to the progress bar |
| isStarted | Checks if the progress bar has been started |
| isRendered | Checks if the progress bar is rendered in the DOM |
| getPositioningCSS | Returns the positioning CSS property of the progress bar |
Example Usage
1'use client'; 2 3import React from 'react'; 4import { useTopLoader } from 'nextjs-toploader'; 5 6const Component = () => { 7 const loader = useTopLoader(); 8 return ( 9 <div> 10 <button type="button" onClick={() => loader.start()}> 11 Start 12 </button> 13 <button type="button" onClick={() => loader.setProgress(0.5)}> 14 Set Progress 15 </button> 16 </div> 17 ); 18}; 19 20export default Component;
Usage with React, Vite React or any other React Based Framework
For rendering add <NextTopLoader /> to your return() inside the App() in your App.js:
1import NextTopLoader from 'nextjs-toploader'; 2const App = () => { 3 return ( 4 <div> 5 <Router> 6 <NextTopLoader /> 7 <Routes>{/* Your Routes Here */}</Routes> 8 </Router> 9 </div> 10 ); 11}; 12 13export default App;
Default Configuration
If no props are passed to <NextTopLoader />, below is the default configuration applied.
1<NextTopLoader 2 color="#2299DD" 3 initialPosition={0.08} 4 crawlSpeed={200} 5 height={3} 6 crawl={true} 7 showSpinner={true} 8 easing="ease" 9 speed={200} 10 shadow="0 0 10px #2299DD,0 0 5px #2299DD" 11 template='<div class="bar" role="bar"><div class="peg"></div></div> 12 <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>' 13 zIndex={1600} 14 showAtBottom={false} 15/>
color: to change the default color of TopLoader.initialPosition: to change initial position for the TopLoader in percentage, :0.08 = 8%.crawlSpeed: increment delay speed inms.speed: animation speed for the TopLoader inmseasing: animation settings using easing (a CSS easing string).height: height of TopLoader inpx.crawl: auto incrementing behavior for the TopLoader.showSpinner: to show spinner or not.shadow: a smooth shadow for the TopLoader. (set tofalseto disable it)template: to include custom HTML attributes for the TopLoader.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 | "#2299DD" |
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 #2299DD,0 0 5px #2299DD" |
template | string | "<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>" |
zIndex | number | 1600 |
showAtBottom | boolean | false |
showForHashAnchor | boolean | true |
Contributors
Code Contributors
This project was made possible thanks to the contributions of its code contributors.
Financial Contributors
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)
No vulnerabilities found.
No security vulnerabilities found.