I had the chance to create a blog site using React, TypeScript, and Remix. It had been some time since I last implemented pagination, so I needed to spend a bit of time researching.

Since it took longer than expected to figure out the process, I wrote an article on how to implement pagination as a reference for future use.

How to implement

First, create a PaginationProps interface to define the properties the Pagination component will receive.

These properties include the total number of posts, the number of posts per page, the current page number, and a function to update the current page number when the user clicks the previous or next page number.

Next, create the component definition itself: const Pagination: FC<PaginationProps>. In this case, FC is used to create the Pagination component.

interface PaginationProps {
  total: number
  perPage: number
  current: number
  setCurrent: Dispatch<SetStateAction<number>>
}

const Pagination: FC<PaginationProps> = ({
  total,
  perPage,
  current,
  setCurrent,
}): JSX.Element => {
  return (
    <ul>
      <li></li>
    </ul>
  )
}