DEV Community

Cover image for Use hook pagination
Genilson fernandes
Genilson fernandes

Posted on

4

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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay