Pitch: Animação ao mudar de rota no Next.js 13!
Senhoras e senhores, lhes apresento a nextjs-progressloader
A alguns dias atrás, fiz um post comentando minha infelicidade em relação ao depreciamento dos eventos de rotas.
O descontentamento foi tanto que resolvi construir minha própria biblioteca para lidar com a situação, pelo menos quando se trata em chamar outras rotas e não conseguir fazer animação de carregamento na tela.
A biblioteca está em suas primeiras versões, mas já está conseguindo me atender em um grande projeto que estou!
Como usar
Dentro do seu layout root, adicione o componente de animação e, todas as tags link que você clicar, já ativará a animação:
'use client';
import { ProgressLoader } from 'nextjs-progressloader';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ProgressLoader />
{children}
</body>
</html>
);
}
Entretando, as vezes você quer abrir uma rota, dentro de uma função ou em qualquer outro contexto que não esteja usando a tag link diretamente.
É nesse contexto que entra a feature mais legal desse pacote:
Você consegue registrar rotas que irão estar disponiveis em qualquer lugar que você julgar necessário!
Além disso, é possivel registrar tambem um apelido para a rota!
Exemplo:
'use client';
import { ProgressLoader, ContainerLinkProps, ContainerLink } from 'nextjs-progressloader';
const links: ContainerLinkProps["links"] = [
{
href: "/",
nickname: "home",
},
{
href: "/posts",
},
{
href: "/dashboard",
nickname: "dashboard"
},
];
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ProgressLoader />
<ContainerLink links={links} />;
{children}
</body>
</html>
);
}
Você pode adicionar quantos containers quiser, e em qualquer lugar que quiser na sua aplicação!
Se você qusier criar um container global, adicione ele no LAYOUT ROOT DO PROJETO, como no exemplo acima.
Assim, em qualquer lugar que estiver, você pode chamar essa rota, e a animação será executada:
Ex.:
<button className="bg-red-500" onClick={()=> changeRoute("dashboard")}>
Open dashboard route by nickname
</button>
<button className="bg-red-500" onClick={()=> changeRoute("/dashboard")}>
Open dashboard route by href
</button>
Caso você queria criar um container para uma rota especifica, fique a vontade! Tudo que precisa ser feito depois é chamar a função changeRoute()
Importante:
- O paramêtro passado deve ser igual ao nome registrado, seja com href ou com nickname. Caso contrario, não irá funcionar!
- A disponibilização das rotas dependerá de onde colocar o container, se quiser que o container esteja disponivel em mais rotas, SEMPRE FOQUE EM DEIXA-LAS NOS ARQUIVOS LAYOUT
Essa é uma biblioteca que criei essa semana, ainda tem muitas coisas para melhorar e por isso, peço paciencia da comunidade! Mas é um projeto que estou muito orgulho de estar fazendo
Inclusive, se tiver alguem interssado em ajudar de alguma forma, por favor contate-me!
Mas espero que gostem! Pfv, deixem seus FeedBacks!