Responsive pagination component in a modern web interface with content cards

Paginate with Style: React Responsive Pagination for Seamless User Experience

The Orange Cat
The Orange Cat

React Responsive Pagination is a powerful and flexible library that allows developers to create responsive and accessible pagination components for their React applications. This library is designed to intelligently render pagination controls based on the available width, making it an excellent choice for projects that require adaptable user interfaces across various screen sizes.

Features

  • Fully accessible with ARIA tags for screen readers
  • Ready-styled themes with customization options
  • Built-in support for Bootstrap 4 and 5
  • Tree-shaking support for minimal bundle impact
  • Compatible with React 16, 17, and 18
  • Server-side rendering (SSR) support

Installation

To get started with React Responsive Pagination, you can install it using npm or yarn:

Using npm:

npm install react-responsive-pagination

Using yarn:

yarn add react-responsive-pagination

Basic Usage

Simple Pagination Component

Let’s start with a basic example of how to use the React Responsive Pagination component:

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';
import 'react-responsive-pagination/themes/classic.css';

function PaginationExample() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 20;

  return (
    <ResponsivePagination
      current={currentPage}
      total={totalPages}
      onPageChange={setCurrentPage}
    />
  );
}

In this example, we import the ResponsivePagination component and a default theme. We use the useState hook to manage the current page state. The onPageChange prop is set to update the current page when a user clicks on a page number.

Styling Options

React Responsive Pagination offers three main ways to style your pagination component:

  1. Custom CSS
  2. Ready-to-go themes
  3. Bootstrap integration

Let’s explore the ready-to-go themes option:

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';
import 'react-responsive-pagination/themes/bootstrap.css';

function BootstrapStyledPagination() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 15;

  return (
    <ResponsivePagination
      current={currentPage}
      total={totalPages}
      onPageChange={setCurrentPage}
      extraClassName="justify-content-center"
    />
  );
}

In this example, we’re using the Bootstrap theme by importing its CSS file. The extraClassName prop is used to center-align the pagination component.

Advanced Usage

Customizing Behavior for Narrow Widths

React Responsive Pagination allows you to specify how the component should behave when rendered in narrow widths:

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';
import { dropNav, dropEllipsis, combine } from 'react-responsive-pagination/narrowBehaviour';

function NarrowWidthPagination() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 50;

  return (
    <ResponsivePagination
      current={currentPage}
      total={totalPages}
      onPageChange={setCurrentPage}
      narrowBehaviour={combine(dropNav, dropEllipsis)}
    />
  );
}

In this example, we’re using the narrowBehaviour prop to specify that for very narrow widths, the component should first drop the navigation buttons and then the ellipsis if necessary.

Custom Labels and ARIA Labels

You can customize the labels for the previous and next buttons, as well as their ARIA labels for improved accessibility:

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';

function CustomLabelsPagination() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;

  return (
    <ResponsivePagination
      current={currentPage}
      total={totalPages}
      onPageChange={setCurrentPage}
      previousLabel="Previous Page"
      nextLabel="Next Page"
      ariaPreviousLabel="Go to previous page"
      ariaNextLabel="Go to next page"
    />
  );
}

This example demonstrates how to use custom text for the previous and next buttons, as well as custom ARIA labels for improved screen reader support.

Maximum Width and Render Nav Options

You can control the maximum width of the pagination component and whether to render navigation buttons:

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';

function CustomWidthPagination() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 25;

  return (
    <ResponsivePagination
      current={currentPage}
      total={totalPages}
      onPageChange={setCurrentPage}
      maxWidth={500}
      renderNav={false}
    />
  );
}

In this example, we set a maximum width of 500 pixels for the pagination component and disable the rendering of navigation buttons.

Conclusion

React Responsive Pagination is a versatile and powerful library for implementing pagination in React applications. Its responsive design, accessibility features, and customization options make it an excellent choice for developers looking to enhance their user interfaces with efficient navigation controls.

By leveraging the library’s various props and styling options, you can create pagination components that not only look great but also provide a seamless user experience across different devices and screen sizes. Whether you’re building a simple blog or a complex data-driven application, React Responsive Pagination offers the flexibility and functionality to meet your pagination needs.

Comments