react-paginate

What is react-paginate?

react-paginate is a React component that helps in creating pagination for your data. It provides a flexible and customizable way to paginate through large sets of data, making it easier to navigate and manage.

What are react-paginate's main functionalities?

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>
  );
}

Other packages similar to react-paginate

rc-pagination

rc-pagination is a pagination component for React that provides a similar set of features to react-paginate. It is highly customizable and supports various pagination styles. Compared to react-paginate, rc-pagination offers more built-in styles and configurations but may require more setup for custom designs.

react-js-pagination

react-js-pagination is another React pagination component that offers a straightforward API for implementing pagination. It is simpler than react-paginate and may be easier to use for basic pagination needs. However, it might lack some of the advanced customization options available in react-paginate.

material-ui-pagination

material-ui-pagination is a pagination component designed to work seamlessly with Material-UI. It provides a Material Design look and feel, making it a good choice for projects already using Material-UI. Compared to react-paginate, it offers a more integrated experience with Material-UI but may not be as flexible for non-Material-UI projects.

README

react-paginate

A ReactJS component to render a pagination.

Getting started:

Install:

npm install react-paginate

To load the component:

var ReactPaginate = require("react-paginate");

To run tests:

npm test

Using it into your own project:

var React         = require("react");
var ReactPaginate = require("react-paginate");


var MyComponent = React.createClass({
  loadObjectsFromServer: function() {
    $.ajax({
      url: {this.props.url},
      dataType: 'json',
      data: {limit: this.props.perPage, offset: this.state.offset},
      success: function(data) {
        this.setState({data: data, pageNum: (data.total_count / data.limit)});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handlePageClick: function(data) {
    var selected = data.selected;
    this.setState({offset: Math.ceil((selected) * this.props.perPage)});
    this.loadObjectsFromServer();
  },
  getInitialState: function() {
    return {data: [], offset: 0};
  },
  componentDidMount: function() {
    this.loadObjectsFromServer();
  },
  render: function() {
    return (
      <div className="my-component">
        <MyComponentList data={this.state.data} />

        <nav id="project-pagination">
            <ReactPaginate clickCallback={this.handlePageClick}
                           previousLabel={<span class="prev">Previous</span>}
                           nextLabel={<span class="prev">Next</span>}
                           breakLabel={<span class="ellipsis">...</span>}
                           pageNum={this.state.pageNum}
                           marginPagesDisplayed={2}
                           pageRangeDisplayed={2} />
        </nav>
      </div>
    );
  }
});

var MyComponentList = React.createClass({
  render: function() {
    var items = this.props.data.map(function(item, index) {
      return (
        <li>{item.property}</li>
      );
    });
    return (
      <div className="my-list">
        <ul>
          {items}
        </ul>
      </div>
    );
  }
});

React.renderComponent(
    <MyCustomComponent
        url={'http://my-api-url/objects'}
        perPage={10} />,
    container
);

module.exports = MyComponentList;
module.exports = MyComponent;