next-app-progress-bar
v1.5.1
Published
A next js (app+page) route top progress bar has all the functionality required, including all the features and fixed from earlier packages.
Downloads
353
Maintainers
siamahnafReadme
Next App Progress Bar
A next js (app+page) route top progress bar has all the functionality required, including all the features and fixed from earlier packages. Most popular packages are nextjs-toploader and next-nprogress-bar both has some issues. nextjs-toploader do not come with delay time and even they don't want to give this options as it already has a closed PR . On the other hand next-nprogress-bar has a open issue. I just try solve this issues and give the options also.
- Small in Size
delayoptions- Solve for not showing progress bar on first load
- Properly Maintained
Installation
$ npm i next-app-progress-barApp Router
Import AppProgressBar in your app/layout.tsx/js and place inside the body tag.
import { AppProgressBar } from "next-app-progress-bar";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<AppProgressBar />
{children}
</body>
</html>
);
}useRouter hook support
For triggering progress bar in your app folder, please use follow the steps bellow.
//Import `useRouter` from `next-app-progress-bar` instead `next/navigation`.
import { useRouter } from "next-app-progress-bar";
//Then simple use it as like you normally use from `next/navigation`
Page Router
Import PageProgressBar into your pages/_app.tsx/js and place the component on MyApp.
import { PageProgressBar } from 'next-app-progress-bar';
export default function MyApp({ Component, pageProps }) {
return (
<>
<PageProgressBar />
<Component {...pageProps} />;
</>
);
}For page router you do not handle useRouter separately
Configurations
Stay in touch
- Author - Siam Ahnaf
- Website - https://www.siamahnaf.com/
- Twitter - https://twitter.com/siamahnaf198
- Github - https://github.com/siamahnaf