@jodd/next-top-loading-bar
v1.0.4
Published
Top loading bar for Nextjs App Router
Downloads
387
Maintainers
bibekjoddReadme
Next Top Loading Bar
Top loading bar for Nextjs App Router
Try live demo here
Npm package link here
Install
npm i @jodd/next-top-loading-bar
# or
yarn add @jodd/next-top-loading-bar
# or
pnpm i @jodd/next-top-loading-bar
# or
bun i @jodd/next-top-loading-barUsage
Import Loading bar to the Root layout
import { LoadingBar } from "@/jodd/next-top-loading-bar";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<LoadingBar color="#0284c7" waitingTime={200} />
{children}
</body>
</html>
);
}Replace next Link component with ProgressLink
export function Component() {
return (
<div>
{/* use progress link to fire top loading bar on route change */}
<ProgressLink href="/dashboard">Dashboard</ProgressLink>
</div>
);
}Manually start the top loading bar transition
import { useLoadingBar } from "@jodd/next-top-loading-bar";
import { useRouter } from "next/navigation";
export default function Component() {
const { start } = useLoadingBar.getState();
const router = useRouter();
const navigateSomewhere = () => {
const route = "/somewhere";
start(route);
router.push(route);
};
return (
<div>
<button onClick={navigateSomewhere}>Go to somewhere</button>
</div>
);
}Use button as a link
import { ProgressButton } from "@jodd/next-top-loading-bar";
export default function Component() {
const computedLink = compute();
return (
<div>
<ProgressButton href={computedLink}>Go to computed link</ProgressButton>
</div>
);
}Credits
- This package uses react-top-loading-bar under the hood
- This package uses snap for state management