DIY usePagination - React with Typescript

Many applications may need to use multiple pages for easier navigation for better user experience. A good example would be Blog app, An application that displays a list of blog posts and allows users to navigate through them by dividing them into pages.

I will demonstrate how to create a custom hook that implements the logic that pagination brings by displaying a list of blog posts fetched via external API - https://jsonplaceholder.typicode.com/.
The complete code is available at the use-pagination-diy GitHub repository.

Setting up the project

Let's start by creating a new Vite project of react with typescript.
$ npm create vite@latest

After getting into the app folder and installing the dependencies
run the App with
$ npm run dev

As a first step, we will install a third-party library called react-query.
$ npm i react-query

With this library, we will easily be able to fetch data from the API.

Inside the src folder we will create three additional folders:

api
components
hooks

And delete the App.css file to read from one style file.
Our app file structure should look like this:

Fetching Data

We will create a new file in the API folder called post.ts. In this file, we will write the function to import posts from the external API. We will then transfer them to the component.

export type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export async function getPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  return res.json();
}

Displaying the Data

By using react-query, we'll fetch the data into the App.tsx file, then create a new component that will be inside the components folder and will be responsible for displaying a list of posts.

components/Posts.tsx :

import { Post } from "../api/post";

interface Props {
  posts: Post[];
}

export function Posts({ posts }: Props) {
  return (
    <div>
      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

App.tsx :

import { useQuery } from "react-query";
import { getPosts, Post } from "./api/post";

import { Posts } from "./components/Posts";

function App() {
  const {
    data: posts,
    isLoading,
    isError,
    error,
  } = useQuery<Post[], Error>("posts", getPosts);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError || !posts) {
    return <div>{error?.message}</div>;
  }

  return (
    <div className="App">
      <Posts posts={posts} />
    </div>
  );
}

export default App;

Implement usePagination Hook

Our next step will be to create the hook that will be responsible for pagination, revealing the necessary data to the Posts component so that it can present the desired page to the user.

hooks/usePagination.ts :

import { useState } from "react";

const initialData = {
  currentPage: 1,
  itemsPerPage: 10,
};

export function usePagination<T>(items: T) {
  const [currentPage, setCurrentPage] = useState(initialData.currentPage);
  const [itemsPerPage] = useState(initialData.itemsPerPage);

  if (!Array.isArray(items)) throw "Expected items to be an array";

  const indexOfLast = currentPage * itemsPerPage;
  const indexOfFirst = indexOfLast - itemsPerPage;

  const currentItems = items.slice(indexOfFirst, indexOfLast);
  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);

  return { currentItems, itemsPerPage, paginate };
}

In order to display all the items we want on each page, we will define two local states:

currentPage: saves the current page the user is on
itemsPerPage: saves the amount of items we want to be displayed while the user is on that page

By looking through rows 14+15 of the two states we defined, we will find the first and last indexes of the list.

Create Pagination Component

During this step, we will prepare the component that will show us the navigation between the pages. First, we will add two new classes to our index.css file in order to display the navigation bar between the pages (the pagination) in a normal manner.

Two new classes at index.css file :

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.page {
  font-weight: bold;
  color: darkblue;
  cursor: pointer;
}

components/Pagination.tsx :

interface Props {
  postsPerPage: number;
  totalPosts: number;
  paginate: (value: number) => void;
}

export function Pagination({ postsPerPage, totalPosts, paginate }: Props) {
  const pageNumbers = Array(Math.ceil(totalPosts / postsPerPage))
    .fill(0)
    .map((e, i) => i + 1);

  return (
    <ul className="pagination">
      {pageNumbers.map((pageNumber) => (
        <li key={pageNumber} onClick={() => paginate(pageNumber)}>
          <span className="page">{pageNumber}</span>
        </li>
      ))}
    </ul>
  );
}

Wrapping up

As a result of the work we have accomplished so far, we will connect it all to one App.tsx the component that will display the list and paginate it.

App.tsx :

import { useQuery } from "react-query";
import { getPosts, Post } from "./api/post";
import { usePagination } from "./hooks/usePagination";

import { Posts } from "./components/Posts";
import { Pagination } from "./components/Pagination";

function App() {
  const {
    data: posts,
    isLoading,
    isError,
    error,
  } = useQuery<Post[], Error>("posts", getPosts);
  const { currentItems, itemsPerPage, paginate } = usePagination<Post[]>(
    posts ?? []
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError || !posts) {
    return <div>{error?.message}</div>;
  }

  return (
    <div className="App">
      <Posts posts={currentItems} />
      <Pagination
        postsPerPage={itemsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
      />
    </div>
  );
}

export default App;