nextjs-progressloader
Advanced tools
Changelog
v1.2.0
Readme
Important context: Latter the Next.Js 13 update, router events has ben depreciated and still there's no 'next native resource' to manipulate router events as before. But this lib was build to solve this problem and bring a new way to make the UX/UI better!
npm install nextjs-progressloader
yarn add nextjs-progressloader
Import the animation component:
import { ProgressLoader } from 'nextjs-progressloader';
app/layout.js for app folder structureFor rendering add <ProgressLoader /> to your return() inside the <body></body> tag of RootLayout():
'use client';
import { ProgressLoader } from 'nextjs-progressloader';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ProgressLoader />
{children}
</body>
</html>
);
}
<ProgressLoader />If you would like to render some route with the Load Animation, use <ContainerLink /> component and our custom useRouter() hook to do it:
When render <ContainerLink /> you are required to pass a links prop which is responsible to create all the needed events to work.
And when using useRouter() a event will be emitted based on the function's param.
links prop and the function's parameter must be equals.<body></body><ContainerLink /> next will identify the routes and will pre-render: verify the documentationOnce the links are defined, you can invoke the route wherever and whenever you want using the nickname or href.
import { useRouter, ContainerLink, ContainerLinkProps } from 'nextjs-progressloader';
const links: ContainerLinkProps["links"] = [
{
href: "/",
nickname: "home",
},
{
href: "/posts",
nickname: "posts"
},
{
href: "/login",
},
];
export function ComponentIWantToRender(){
const router = useRouter()
function validateSomeThing(){
// your validation
//Example
if(userLogged){
// calling by the nickname
router.push("home")
}else{
//calling by the route
router.push("/login")
}
}
return (
<>
<ContainerLink links={links} />;
<button className="bg-red-500" onClick={validateSomeThing}>
Validating something
</button>
</>
)
}
FAQs
Next.js library to manage navigation between pages/routes with loading animation
The npm package nextjs-progressloader receives a total of 976 weekly downloads. As such, nextjs-progressloader popularity was classified as not popular.
We found that nextjs-progressloader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.