Pagination is essential when working with large datasets, making it easier to display content in a user-friendly manner. In this post, we’ll create an advanced pagination component in React that works with react-router-dom to update the URL and navigate between pages dynamically. We will also cover installation, component setup, and how to use it in your application.

Step 1: Necessary Installations

Before we start, let’s install the required dependencies. Since we are going to use react-router-dom for handling routing and page navigation, ensure it’s installed in your project. Install it here.

In this example, we’ll also use icons from the react-icons library for the pagination arrows. Installreact-icons here.

We will also use Tailwind CSS for styling. Install it here.

Step 2: Understanding the Pagination Component

The advanced pagination component does a few key things:

Renders page numbers dynamically: It renders buttons for the current page, the first and last pages, and ellipses (...) if necessary.
Handles page navigation: Clicking on a page number updates the URL with a query parameter (e.g., ?page=2), and the component navigates to the selected page.
Previous/Next buttons: Users can navigate to the previous or next page using arrows.
Responsive: The pagination layout is optimized for different screen sizes.

Step 3: Code Breakdown

Here’s the code for the Pagination component that uses react-router-dom to handle navigation and dynamic page updates:

import { useLocation, useNavigate } from 'react-router-dom'

import { IoChevronForwardSharp, IoChevronBackSharp } from 'react-icons/io5'

const Pagination = () => {

const pageCount = 10 // Total number of pages (can be dynamic)

const { search, pathname } = useLocation()

const navigate = useNavigate()

// Get the current page from the URL or default to 1

const searchParams = new URLSearchParams(search)

const page = parseInt(searchParams.get('page')) || 1

const handlePageChange = (pageNumber) => {

searchParams.set('page', pageNumber)

navigate(`${pathname}?${searchParams.toString()}`)

}

const addPageButton = ({ pageNumber, activeClass }) => {

return (

<button

key={pageNumber}

onClick={() => handlePageChange(pageNumber)}

className={`px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 ${

activeClass ? 'bg-blue-500 text-white' : 'text-gray-500 bg-white'

}`}

>

{pageNumber}

</button>

)

}

const renderPageButtons = () => {

const pageButtons = []

// First page button

pageButtons.push(addPageButton({ pageNumber: 1, activeClass: page === 1 }))

// Ellipsis before current page

if (page > 2) {

pageButtons.push(

...

</span>

)

}

// Current/active page

if (page !== 1 && page !== pageCount) {

pageButtons.push(addPageButton({ pageNumber: page, activeClass: true }))

}

// Ellipsis after current page

if (page < pageCount - 1) {

pageButtons.push(

...

</span>

)

}

// Last page button

pageButtons.push(

addPageButton({ pageNumber: pageCount, activeClass: page === pageCount })

)

return pageButtons

}

if (pageCount < 2) return null

return (

{/* Previous page button */}

<button

className="px-3 py-2 text-gray-800 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700"

onClick={() => {

let prevPage = page - 1

if (prevPage < 1) prevPage = pageCount

handlePageChange(prevPage)

}}

>

</button>

{/* Page buttons */}

{renderPageButtons()}

{/* Next page button */}

<button

className="px-3 py-2 text-gray-800 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700"

onClick={() => {

let nextPage = page + 1

if (nextPage > pageCount) nextPage = 1

handlePageChange(nextPage)

}}

>

</button>

</div>

</div>

)

}

export default Pagination

Conclusion

With this advanced pagination component, you can create a flexible and dynamic pagination experience for your users. The component handles navigation and URL updates, making it easy to implement in any project that requires pagination for large datasets.