Olá! Desenvolvi este hook para resolver um problema pessoal, mas quem sabe também possa ser útil para você.
Este hook gera uma sequência de páginas para renderizar na tela e permite controlar a ação do usuário ao navegar entre elas. É um código simples, mas que sempre me ajuda quando preciso criar esse tipo de interface de usuário.
const { currentPage, handlePageChange, nextPage, prevPage, range } =
usePagination({
initialPage: 1,
totalPages: 20,
});
// output;
// range => [1, '...', 3, 4, 5, '...', 20]
handlePageChange(3)
// currentPage => 3
// range => [1, '...', 2, 3, 4, '...', 20]
Dito isso, eu desenvolvi o hook novamente e publiquei no npm. Investi tempo na documentação, seguindo uma abordagem orientada a testes para garantir consistência e segurança para o uso.
A documentação está disponível no Storybook e também no README, com um guia de como utilizar o hook. Você pode conferir a documentação aqui: [https://65de0e043d606805aeba4797--glowing-alfajores-c9ed2e.netlify.app/?path=/docs/hooks-usepagination--docs].
Qualquer sugestão, pode deixar abaixo ou pode voce mesmo aprimorar o hook!
Para hoje era isso , tchau!
Top comments (0)