![face photo](/build/_assets/face-BFDWJR5C.webp)
Tack
taka.beckham@gmail.com
May 06, 2023
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>
)
}