Hello! I'm @Ryo54388667! ☺️

I usually work as an engineer in Tokyo!

I mainly work with technologies like TypeScript and Next.js. This time I'll introduce how to implement pagination with an ellipsis menu!

What We're Implementing

First, I think it's best to show you what we're implementing.

This is already implemented on the top page of this blog. This Storybook version might be easier to see.

This UI is implemented on various blogs, so if you search the web, you'll find many implementation methods. However, I thought pagination with ellipsis menus like this is somewhat rare, so I wrote this article.

Implementation Details

For those who just want the code, please check out this file!

Let me explain the details.

const rate = totalCount / PER_PAGE;
const totalPages = rate