react-paginate

Basic Pagination

This code demonstrates a basic usage of react-paginate. It sets up a pagination component with labels for previous and next buttons, a break label, and specifies the number of pages to display. The handlePageClick function logs the selected page number.

import ReactPaginate from 'react-paginate';

function PaginationComponent() {
  const handlePageClick = (data) => {
    console.log(data.selected);
  };

  return (
    <ReactPaginate
      previousLabel={'previous'}
      nextLabel={'next'}
      breakLabel={'...'}
      breakClassName={'break-me'}
      pageCount={10}
      marginPagesDisplayed={2}
      pageRangeDisplayed={5}
      onPageChange={handlePageClick}
      containerClassName={'pagination'}
      subContainerClassName={'pages pagination'}
      activeClassName={'active'}
    />
  );
}

Custom Styling

This example shows how to apply custom styling to the pagination component by importing a CSS file and setting custom class names for the container, sub-container, and active page.

import ReactPaginate from 'react-paginate';
import './pagination.css';

function CustomStyledPagination() {
  const handlePageClick = (data) => {
    console.log(data.selected);
  };

  return (
    <ReactPaginate
      previousLabel={'previous'}
      nextLabel={'next'}
      breakLabel={'...'}
      breakClassName={'break-me'}
      pageCount={10}
      marginPagesDisplayed={2}
      pageRangeDisplayed={5}
      onPageChange={handlePageClick}
      containerClassName={'custom-pagination'}
      subContainerClassName={'pages custom-pagination'}
      activeClassName={'active'}
    />
  );
}

Controlled Pagination

This example demonstrates a controlled pagination component where the current page state is managed using React's useState hook. The forcePage prop is used to control the current page programmatically.

import React, { useState } from 'react';
import ReactPaginate from 'react-paginate';

function ControlledPagination() {
  const [currentPage, setCurrentPage] = useState(0);

  const handlePageClick = (data) => {
    setCurrentPage(data.selected);
  };

  return (
    <div>
      <ReactPaginate
        previousLabel={'previous'}
        nextLabel={'next'}
        breakLabel={'...'}
        breakClassName={'break-me'}
        pageCount={10}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={handlePageClick}
        containerClassName={'pagination'}
        subContainerClassName={'pages pagination'}
        activeClassName={'active'}
        forcePage={currentPage}
      />
      <p>Current Page: {currentPage + 1}</p>
    </div>
  );
}