In this article, I’ll be covering how to create a pagination component in react with TypeScript. The aim is to make it as generic as possible. It will be a presentation component, also known as “dumb component” because it only displays the html with styles (doesn’t have state or logic).

As usual, my aim is to be able to have it working in less than 10 minutes. I’m going to build it with React TypeScript and using CSS Modules with Sass. I am starting to enjoying it a lot as it allows to localize the styling to your component so I don’t have to worry as much for the naming in the app. For testing, I’ll use jest with enzyme.

How it should work?

As a reference we’ll use the pagination component of Airbnb. You an see how it works on the image below. These are the main characteristics:

• It always shows the first and the last page.
• It always shows at least 3 consecutive pages, usually the page you are on, the previous one at the left and the next one at the right. In the case of the first one, displays the first 3 and in the last page it displays the last 3 pages.
• It uses 3 dots as separator between the first page and the previous page that we are on. Also between the next page that we are on and the last page.
• The previous page indicator appears except when in the first page. The next page indicator appears except when in the last page.

#jest #typescript #react #coding #programming