Pagination in React Made Simple with react-paginate

npm create vite@latest blog-react-paginate -- --template react

npm install --save prop-types

{
    "rules": {
        "react/prop-types": 0
    }
}

npm install react-paginate

// src\App.jsx
import './App.css';
import Content from './components/Content';
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      {/* will add these components later */}
      <Header />
      <Content />
    </div>
  );
}

export default App;

// src\components\Header.jsx
export default function Header() {
    return <h1>React Pagination Tutorial</h1>
}

// src\api\posts.js
// Define the base URL for the dummyjson API
const BASE_URL = 'https://dummyjson.com';

export const getPosts = async (page = 1, limit = 10) => {
  // Construct the URL for fetching posts, including pagination parameters
  const url = `${BASE_URL}/posts?limit=${limit}&skip=${(page * limit) - limit}`;

  try {
    // Fetch the data from the URL
    const response = await fetch(url);

    // If the response is not ok (status code is not in the range 200-299),
    // throw an error
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    // Parse the response data as JSON
    const data = await response.json();
    
    // Return the parsed data
    return data;
  } catch (error) {
     // If there's an error, log it to the console and re-throw it
    console.error('Error fetching data:', error);
    throw error;
  }
};

// src\components\Content.jsx
import Pagination from "./Pagination"
import { useEffect, useState } from "react";
import { getPosts } from "../api/posts";

export default function Content() {
    // Initialize state variables
    const [data, setData] = useState({});
    const [loading, setLoading] = useState(true);

    // Get the current page number from the URL
    const params = new URLSearchParams(window.location.search);
    const pageParam = params.get('page');
    // This is the page that the component will start on when it’s first rendered. It’s calculated 
    // by getting the ‘page’ parameter from the URL, subtracting 1 (since pages are 0-indexed in the 
    // pagination component), and defaulting to 0 if the ‘page’ parameter isn’t present. This allows 
    // the component to remember the page number across page reloads.
    const initialPage = pageParam ? parseInt(pageParam, 10) - 1 : 0;
    // This is the current page that the component is on. It’s stored in a state variable so that 
    // the component can re-render whenever it changes. The setCurrentPage function is used to 
    // update this state variable.
    const [currentPage, setCurrentPage] = useState(initialPage);

    // Fetch posts when the currentPage changes
    useEffect(() => {
        fetchPosts(currentPage);
    }, [currentPage]);

    // Define the function to fetch posts
    const fetchPosts = async (page) => {
        setLoading(true);
        try {
            const data = await getPosts(page + 1);
            setData(data);
        } catch (error) {
            console.error('Error fetching posts:', error);
        }
        setLoading(false);
    };

    // This function is passed to the Pagination component and is called whenever the user changes 
    // the page. 
    const handlePageChange = ({ selected }) => {
        const nextPage = selected;

        // Update the URL with the new page value
        const params = new URLSearchParams(window.location.search);
        params.set('page', nextPage + 1);

        // Replace the current URL without reloading the page
        window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);

        setCurrentPage(nextPage);
    };

    // Display a loading message while fetching posts
    if (loading) {
        return <div>Loading...</div>
    }

    // Display the posts and pagination if there are posts
    if (data.posts?.length > 0) {
        const limit = 10;
        const pageCount = Math.ceil(data.total / limit)
        return <>
            {data.posts.map((post) => (
                <div key={post.id}>{`${post.id} : ${post.title}`}</div>
            ))}

            <Pagination initialPage={initialPage} pageCount={pageCount} onPageChange={handlePageChange} />
        </>
    }

    // Display a message if no posts were found
    return <div>No posts found.</div>
}

// src\components\Pagination.jsx
import { func, number } from 'prop-types';
import ReactPaginate from 'react-paginate';

const Pagination = ({ initialPage, pageCount, onPageChange }) => {
  // Return the ReactPaginate component with the necessary props
  return (
    <ReactPaginate
      activeClassName='pagination-active' // The class name for the active page
      breakClassName='pagination-break' // The class name for the break ('...')
      containerClassName='pagination-container' // The class name for the pagination container
      initialPage={initialPage} // The initial page
      marginPagesDisplayed={2} // The number of pages displayed at the margins
      nextClassName='pagination-next-prev' // The class name for the next button
      onPageChange={onPageChange} // The function to call when the page changes
      pageCount={pageCount} // The total number of pages
      pageRangeDisplayed={3} // The range of pages displayed
      pageClassName='pagination-page' // The class name for the page
      previousClassName='pagination-next-prev' // The class name for the previous button
    />
  );
};

// Define the prop types for the Pagination component
Pagination.propTypes = {
  initialPage: number.isRequired, // The initial page is required and must be a number
  pageCount: number.isRequired, // The total number of pages is required and must be a number
  onPageChange: func.isRequired, // The function to call when the page changes is required
};

export default Pagination;

/* src\index.css */
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

/* src\App.css */
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.pagination-container {
  align-items: left;
  display: flex;
  flex-direction: flex-row;
  justify-content: center;
  list-style: none;
  gap: 16px;
  padding: 0;
}

.pagination-page {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  font-weight: 700; 
  cursor: pointer;
}

.pagination-active > a {
  font-weight: bolder;
}

.pagination-next-prev {
  display: flex;
  padding: 0.75rem; 
  justify-content: center; 
  align-items: center; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  cursor: pointer;
}

.pagination-break {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  cursor: pointer; 
}