Home / React / Miscellaneous

A ReactJS component that creates a pagination

react-paginate A ReactJS component to render a pagination. By installing this component and writing only a little bit of CSS you can obtain this: or Installation Install react-paginate with npm: $ npm instal
Information
Category: React / Miscellaneous
Watchers: 14
Star: 2.6k
Fork: 610
Last update: May 29, 2023
Resource links
https://github.com/AdeleD/react-paginate

react-paginate

NPM Build Status

A ReactJS component to render a pagination.

By installing this component and writing only a little bit of CSS you can obtain this:

Pagination demo 2

or

Pagination demo 1

Installation

Install react-paginate with npm:

$ npm install react-paginate --save

For CommonJS users:

import ReactPaginate from 'react-paginate';

Read the code of demo/js/demo.js. You will quickly understand how to make react-paginate work with a list of objects.

Demo

Clone the repository and move into:

$ git clone [email protected]:AdeleD/react-paginate.git
$ cd react-paginate

Install dependencies:

$ make install

Prepare the demo:

$ make demo

Run the server:

$ make serve

Open your browser and go to http://localhost:3000/

Pagination demo

Props

Name Type Description
pageCount Number Required. The total number of pages.
pageRangeDisplayed Number Required. The range of pages displayed.
marginPagesDisplayed Number Required. The number of pages to display for margins.
previousLabel Node Label for the previous button.
nextLabel Node Label for the next button.
breakLabel Node Label for ellipsis.
breakClassName String The classname on tag li of the ellipsis element.
breakLinkClassName String The classname on tag a of the ellipsis element.
onPageChange Function The method to call when a page is clicked. Exposes the current page object as an argument.
initialPage Number The initial page selected.
forcePage Number To override selected page with parent prop.
disableInitialCallback boolean Disable onPageChange callback with initial page. Default: false
containerClassName String The classname of the pagination container.
pageClassName String The classname on tag li of each page element.
pageLinkClassName String The classname on tag a of each page element.
activeClassName String The classname for the active page.
activeLinkClassName String The classname on the active tag a.
previousClassName String The classname on tag li of the previous button.
nextClassName String The classname on tag li of the next button.
previousLinkClassName String The classname on tag a of the previous button.
nextLinkClassName String The classname on tag a of the next button.
disabledClassName String The classname for disabled previous and next buttons.
hrefBuilder Function The method is called to generate the href attribute value on tag a of each page element.
extraAriaContext String DEPRECATED: Extra context to add to the aria-label HTML attribute.
ariaLabelBuilder Function The method is called to generate the aria-label attribute value on each page link

Contribute

  1. Submit an issue
  2. Fork the repository
  3. Create a dedicated branch (never ever work in master)
  4. The first time, run command: webpack into the directory
  5. Run npm start
  6. Fix bugs or implement features
  7. Always write tests

Run tests:

$ make test
36 Open More issues
Closed

forcePage doesn't work

If I render this

class MyPagination extends Component {
  constructor() {
    this.state = { currentPage: 0 }
  }

  render() {
    return (
      <ReactPaginate
        pageCount={10}
        pageRangeDisplayed={3}
        marginPageDisplayed={3}
        forcePage={this.state.currentPage}
      />
    )
  }
}

Then click on pages, the selected page changes. I would expect it to stay on page 0

I'd like to perform async actions after page click before having the change reflected. Is this possible given the current configuration options?

opened Jan 29, 2017 by JakeElder 30
Closed

renderOnZeroPageCount missing on type

Using typescript here, when i add renderOnZeroPageCount the prop is not recognized

Screenshot 2021-11-16 at 15 51 12 d:

opened Nov 16, 2021 by equinusocio 18
Closed

clickCallback gets called without a click

Hello,

I noticed that when react-paginate first gets displayed on a page, it automatically calls the clickCallback handler.

I don't want it to do this. I just want the clickCallback handler called when a page number is clicked.

Am I doing something wrong?

opened Jul 1, 2016 by hackingbeauty 13
Closed

Compatibility with styled-components

It would be nice to have direct compatibility with styled-component by accepting the standard className prop as alternative to the containerClassName prop. Otherwise styling with styled-components is only possible by wrapping the component in an extra wrapper component.

const StyledReactPaginate = styled(ReactPaginate)`
  a {
    cursor: pointer;
  }
  .selected {
    background: lime;
  }
`;
opened Sep 21, 2020 by tpinne 11
Closed

How to update/reset the pagination every time I search in the search bar for list item?

First I'm not sure if the functionality of my filter/search bar are correct.

Here are my concern, we have the words 'dolor' and 'dolorum' in the items of 25pages.

You can view it here.

Try to search the word "dolor" in the searchbar, the 25pages pagination is now 18pages. Then click the third pagination links and update your search to 'dolorum' in the searchbar, see the message says 'No Posts Found!' and the pagination is now 2pages. But we have 'dolorum' content in the items but it is only up to two pages of the pagination, and I think that is the reason why I got an error of 'No Posts Found!', because I clicked the third pagination links.

Is my code/functionality right? Is there any suggestions to avoid that bug in my code? maybe update the pagination/content items everytime I search?

Below is my code and to better understand here is the complete sandbox code https://codesandbox.io/. It's free to fork it!

Movielist.js

import { React, useState, useEffect } from "react";
import MovieListPagination from "./MovieListPagination";
import SearchBar from "./SearchBar";

const MovieList = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
          setSearchResults(result);
          //console.log(result);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  if (error) {
    return <div className="p-3">Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div className="p-3">Loading...</div>;
  } else {
    return (
      <>
        <SearchBar items={items} setSearchResults={setSearchResults} />
        <MovieListPagination dataProps={searchResults} itemsPerPage={4} />
      </>
    );
  }
};

export default MovieList;

MovielistPagination.js

import { React, useState } from "react";
import { Row, Alert } from "react-bootstrap";
import ReactPaginate from "react-paginate";
import MovieListItems from "./MovieListItems";

const MovieListPagination = ({ itemsPerPage, dataProps }) => {
  const [itemOffset, setItemOffset] = useState(0);
  const endOffset = itemOffset + itemsPerPage;
  const currentItems = dataProps.slice(itemOffset, endOffset);
  const pageCount = Math.ceil(dataProps.length / itemsPerPage);
  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % dataProps.length;
    setItemOffset(newOffset);
  };

  const results = currentItems.map((item) => (
    <MovieListItems key={item.id} items={item} />
  ));

  const content = results?.length ? (
    results
  ) : (
    <Alert variant="primary">No Posts Found!</Alert>
  );

  return (
    <>
      <Row className="justify-content-center">{content}</Row>

      <ReactPaginate
        breakLabel="..."
        nextLabel="›"
        onPageChange={handlePageClick}
        pageRangeDisplayed={3}
        marginPagesDisplayed={1}
        pageCount={pageCount}
        previousLabel="‹"
        renderOnZeroPageCount={null}
        containerClassName="justify-content-center pagination"
        previousClassName="page-item"
        previousLinkClassName="page-link"
        nextClassName="page-item"
        nextLinkClassName="page-link"
        pageClassName="page-item"
        pageLinkClassName="page-link"
        breakClassName="page-item"
        breakLinkClassName="page-link"
        activeClassName="active"
        disabledClassName="disabled"
      />
    </>
  );
};

export default MovieListPagination;

SearchBar.js

import { Form, Button } from "react-bootstrap";

const SearchBar = ({ items, setSearchResults }) => {
  const handleSubmit = (e) => e.preventDefault();

  const handleSearchChange = (e) => {
    if (!e.target.value) return setSearchResults(items);

    const resultsArray = items.filter(
      (item) =>
        item.title.includes(e.target.value.toLowerCase()) ||
        item.body.includes(e.target.value.toLowerCase())
    );

    setSearchResults(resultsArray);
  };

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <Form.Group className="my-3">
          <Form.Control
            type="text"
            id="search"
            placeholder="Search here..."
            onChange={handleSearchChange}
          />
        </Form.Group>
      </Form>
    </>
  );
};
export default SearchBar;
opened Mar 15, 2023 by graydirt 10
Closed

Previous button stays disabled, next always goes to the second page

I get this strange behavior with this is the code: I cannot click on the previous button because it stays disabled, even when going to page 2 or 3 Next always goes back to the second page Clicking on the first page doesn't do anything (it remains to have the class "active" even when i'm on another page)

Similar behavior was found here, but not resolved: https://github.com/AdeleD/react-paginate/issues/100

        <ReactPaginate pageCount={3}
                       marginPagesDisplayed={2}
                       pageRangeDisplayed={2}

                       previousLabel={"previous"}
                       nextLabel={"next"}
                       breakLabel={<a href="">...</a>}
                       breakClassName={"break-me"}
                       disableInitialCallback={true}
                      
                       onPageChange={this.handlePageClick.bind(this)}
                       containerClassName={"pagination"}
                       subContainerClassName={"pages pagination"}
                       activeClassName={"active"} />
opened Feb 17, 2017 by jonas-db 10
Open

pageCount only accepts number but I want to pass a string

So my pageCount sometimes gets too big (in the thousands), and I want to add digit separators like so 1565 => 1,656.

but passing "1,656" as a string is not allowed and if I use normal js numbers with separators 1,555 it just assumes I am trying to pass in two props, 1 and 555.

Is there any workarounds for this?

I want to achieve something like the image below. I customized the container with css, but I can't do the number formatting with CSS, and with JS it just turns it to string which the inner element doesn't accept.

image

opened May 29, 2023 by HamaDler 0
Open

page active link working immediately after clicking before redirecting to that page how to solve this

page active link working immediately after clicking before redirecting to that page how to solve this

here is my component code: import React, { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { controller } from '../../../../../src/state/StateController'; import BigSourceCodeCard from './BigSourceCodeCard/BigSourceCodeCard'; import ReactPaginate from 'react-paginate'; import { ApkData } from '../../../../../interfaces/models'; import Loader from '../../../../helpers/Loader/Loader'; import { useRouter } from 'next/router';

interface Props { apk: Array; }

const LeftLayout: React.FC = ({ apk }) => { const router=useRouter() const states = useSelector(() => controller.states); const [activePage, setActivePage] = useState(1); // const {page}=router.query

const pageCount = Math.ceil(states.totalApk / states.itemsPerPage);

const handlePageClick = (event: any) => { const selectedPage = event.selected + 1; console.log('state',states.currentPage) setActivePage(states.currentPage);

const url = window.location.href;

if (url.includes('search')) {
  window.location.href = `/page/${selectedPage}/search/${states.searchValue}`;
} else if (url.includes('category') && !url.includes('subcat')) {
  window.location.href = `/page/${selectedPage}/category/${states.categoryValue}`;
} else if (url.includes('subcat') && url.includes('category')) {
  window.location.href = `/page/${selectedPage}/category/${states.categoryValue}/subcat/${states.categorySubValue}`;
} else {
  window.location.href = `/page/${selectedPage}`;
}
};

return ( <> {apk ? ( <>

{apk.map(item => { return ( <React.Fragment> <BigSourceCodeCard item={item} /> </React.Fragment> ); })}
<ReactPaginate breakLabel='...' breakLinkClassName={'pageNumber'} pageRangeDisplayed={2} marginPagesDisplayed={1} renderOnZeroPageCount={null} onPageChange={handlePageClick} pageCount={pageCount} previousLabel={'Prev'} nextLabel={'Next'} containerClassName={'paginationContainer'} pageLinkClassName={'pageNumber'} previousLinkClassName={'pageNumber'} nextLinkClassName={'pageNumber'} activeLinkClassName={'active'} disabledLinkClassName={'disable'} forcePage={activePage-1} // Remove this line />
</> ) : (
)} </> ); };

export default LeftLayout;

opened May 15, 2023 by Sayem-Mahmud 0
Open

Update README for demo

null

opened May 15, 2023 by stefanmomm 0
Open

BUG in initialPage props

when using initalPage Props, the onPageChange function gets called automatically

opened May 10, 2023 by sagartmg 0
Open

Bug

While searching data in first page, it should not search for next page

opened Apr 13, 2023 by Chandan9898Kumar 0
Open

forcePage is not working

I'm updating offset and page by using state and the offset is updating and the list shows the right content. But the active page is not updating properly as I triggered using forcePage option. But it not works. Items are displaying for 1st page as offset updated. But the button active is in some other prev active number due to this

function PaginatedItems({ items, props, page, itemOffset, updateOffset }) {
  const itemsPerPage = 10;

  const endOffset = itemOffset + itemsPerPage;

  const currentItems = items.slice(itemOffset, endOffset);
  const pageCount = Math.ceil(items.length / itemsPerPage);

  const handlePageClick = event => {
    const newOffset = (event.selected * itemsPerPage) % items.length;
    updateOffset(newOffset);

  };

  return (
    <>
      <LocationListItems
        locations={currentItems}
        showSidePanel={props.showSidePanel}
        hideSidePanel={props.hideSidePanel}
        scopes={props.scopes}
      />

        <ReactPaginate        
          onPageChange={handlePageClick}
          pageRangeDisplayed={5}
          pageCount={pageCount}
          forcePage={page}*      
          renderOnZeroPageCount={null}
        />
    </>
  );
}

Kindly help me to resolve this. thank in advance!

opened Apr 11, 2023 by arasan-goaugment 1

v8.2.0(Apr 12, 2023)

  • Add an ARIA label for pagination break link with default props of Jump forward and Jump backward when index is before and after the break, respectively
  • Add an optional prop to PaginationBoxView breakAriaLabels allowing the above labels to be user defined.

v8.1.5(Mar 30, 2023)

  • Fix the type of renderOnZeroPageCount in the type declaration file (https://github.com/AdeleD/react-paginate/pull/454).
  • Explain how to add CSS style to the component (https://github.com/AdeleD/react-paginate/pull/472).

v8.1.4(Nov 5, 2022)

  • Add an ARIA role navigation to main <ul> tag
  • Dependencies bumps for generating build. Replace react-hot-loader by react-refresh (see: https://github.com/AdeleD/react-paginate/issues/428#issuecomment-1302408824)

v8.1.3(Apr 11, 2022)

  • Support React 18 (see: https://github.com/AdeleD/react-paginate/issues/423)

v8.1.2(Feb 21, 2022)

  • Excluded unnecessary files from NPM package (see: https://github.com/AdeleD/react-paginate/pull/410)

v8.1.1(Feb 15, 2022)

  • Add TypeScript definition for pageLabelBuilder prop

Contents

    arnedesmedt vue-ads-pagination tailwindcssvue-ads-pagination - A vue pagination component build with the css framework tailwindcss
    sant123 vuejs-uib-pagination - Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination.
    Media24si Pagination for vuejs with combination with bootstrap and Laravel's pagination
    superRaytin A jQuery plugin to provide simple yet fully customisable pagination.
    zollero el-search-table-pagination Detailel-search-table-pagination - Combines Form, Table and Pagination components of Element UI together. Based on Vue 2.x.(Detail)
    gilbitron laravel-vue-pagination - A Vue.js pagination component for Laravel paginators that works with Bootstrap.
    trananhtuat ReactJS Game Landing Page | ReactJS SASS ViteJS
    coderdiaz vue-tiny-pagination - A Vue component for create a tiny pagination.
    grinmax vue-smart-pagination - Smart pagination of any data with a lot of nice settings.
    plantain-00 tree-component - A reactjs, angular and vuejs tree component.
    gilbitron A Vue.js pagination component for Laravel paginators that works with Bootstrap
    matfish2 vue-pagination-2 - Vue.js 2 pagination component.
    bramus Generate a sequence of numbers for use in a pagination system, the clever way.
    xabikos Contains the code snippets for Reactjs development in VS Code editor
    cyon vuex-pagination - Easily work with paginated resources in your Vue/Vuex application. Works well with most of the Vue pagination components.
    websanova jQuery Pagination Plugin
    salatielosorno Utility to implement pagination functionality
    lokyoung A Vue.js(v2.x+) component for creating pagination.
    kdion4891 A dynamic, responsive Laravel Livewire table component with searching, sorting, checkboxes, and pagination.
    lokyoung vuejs-paginate - A Vue.js(v2.x+) component for creating pagination.
    brunoseco vue-pagination-bootstrap - A Vue.js (1.x & 2.x) server-side paging component with a template based on Bootstrap
    Share this repo

    Related Repos


    Miscellaneous
    17
    Code for choosing a state manager for React
    jherr State Manager Example Applications Installation and startup % yarn % yarn start State manager examples Category Name Libraries Downloads Hooks Prop Dr
     
    Miscellaneous
    5
    side side project for hyodo
    imnotmoon moonwalker_tattoo Introduce 바닐라 공부도 할 겸 만드는 아빠 타투샵 홈페이지.. 잘 되면 배포함. SPA로 만들거라 SEO 신경 써줘야 함. 시간 날때만 할거라 딱히 완성도 신경쓰지 않음. Stack homepage : Vanilla JavaSc
     
    Miscellaneous
    11
    React Hooks for ClojureScript
    roman01la hooks React Hooks for ClojureScript Installation Add to deps.edn via Git deps {hooks/hooks {:git/url "[email protected]:roman01la/hooks.git"
     
    Miscellaneous
    163
    create react app by schematics
    flyaway98 sharp-react Generate a variety of react applications through schematic. The project does not do much abstraction. Junior engineers can learn the confi
     
    Miscellaneous
    18
    MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.
    olcaneristi MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.
     
    Miscellaneous
    23
    Nix backend for PureScript. Transpile PureScript code to Nix.
    purenix-org PureNix PureNix is a Nix backend for PureScript. Sometimes, you find yourself having to write Nix code that's more complicated than what the language
     
    Miscellaneous
    27
    Feature Flag component for React
    fdaciuk Feature Flag component for React
     
    Miscellaneous
    16
    Recreating Windows 11 settings using React JS
    yashash1511 Recreating Windows 11 settings using React JS
     
    Miscellaneous
    11
    FOSS4G 2021 Buenos Aires (Argentinia) Workshop PostgreSQL/PostGIS for Beginner
    astroidex foss4g-2021-workshop-postgresql-postgis-for-beginner-astrid-emde Workshop material for PostgreSQL/PostGIS workshop at FOSS4G 2021 Buenos Aires (Argent
     
    Miscellaneous
    24
    Framer motion demo with React
    fireship-io Framer Motion is a relatively new open source, production-ready animation library for React developers.
     
    Miscellaneous
    21
    Netflix clone with MERN Stack (MongoDB, Express, React, Node)
    enescelep Netflix clone with MERN Stack (MongoDB, Express, React, Node)
     
    Miscellaneous
    51
    React Query for Firestore, that you can actually use in production, on every screen.
    aminerol React Query for Firestore, that you can actually use in production, on every screen.
     
    Miscellaneous
    55
    🤯 zART-stack — Zero-API, React [Native], & TypeScript
    KATT 🤯 zART-stack — Zero-API, React [Native], & TypeScript
     
    Miscellaneous
    24
    INotebook is a React Application for managing personal notes on the cloud
    CodeWithHarry INotebook is a React Application for managing personal notes on the cloud
     
    Miscellaneous
    22
    🏠 Airbnb website using React, Next.js and Tailwind CSS
    picozzimichele 🏠 Airbnb website using React, Next.js and Tailwind CSS