DEV Community

Cover image for Use hook pagination
Genilson fernandes
Genilson fernandes

Posted on

Use hook pagination

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]
Enter fullscreen mode Exit fullscreen mode

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!

npm: use-pagination-pull

Para hoje era isso , tchau!

Top comments (0)