Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AdeleD/react-paginate
A ReactJS component that creates a pagination
https://github.com/AdeleD/react-paginate
paginate pagination pagination-components paginator react-component
Last synced: 2 months ago
JSON representation
A ReactJS component that creates a pagination
- Host: GitHub
- URL: https://github.com/AdeleD/react-paginate
- Owner: AdeleD
- License: mit
- Created: 2014-09-19T14:39:10.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-11-17T12:46:48.000Z (7 months ago)
- Last Synced: 2024-04-15T21:58:51.154Z (2 months ago)
- Topics: paginate, pagination, pagination-components, paginator, react-component
- Language: JavaScript
- Homepage:
- Size: 5.65 MB
- Stars: 2,712
- Watchers: 15
- Forks: 621
- Open Issues: 55
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-react - react-paginate - A ReactJS component that creates a pagination.  (UI Components / Paginator)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-stars - AdeleD/react-paginate - A ReactJS component that creates a pagination (JavaScript)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-stars - AdeleD/react-paginate - A ReactJS component that creates a pagination (JavaScript)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-react-components- - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-react-components-all - react-paginate - A ReactJS component that creates a pagination. (Uncategorized / Uncategorized)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (<summary>UI Components</summary> / Paginator)
- awesome-list - react-paginate - A ReactJS component that creates a pagination. (Demos / Paginator)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
- best-of-react - GitHub - 15% open · ⏱️ 12.04.2023): (Other Components)
- fucking-awesome-react-components - react-paginate - A ReactJS component that creates a pagination. (UI Components / Paginator)
README
# react-paginate
[](https://nodei.co/npm/react-paginate/)
[](https://travis-ci.org/AdeleD/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:
Note: You should write your own css to obtain this UI. This package do not provide any css.
or
## Installation
Install `react-paginate` with [npm](https://www.npmjs.com/):
```
npm install react-paginate --save
```
## Usage
```javascript
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';
// Example items, to simulate fetching from another resources.
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
function Items({ currentItems }) {
return (
<>
{currentItems &&
currentItems.map((item) => (
Item #{item}
))}
>
);
}
function PaginatedItems({ itemsPerPage }) {
// Here we use item offsets; we could also use page offsets
// following the API or data you're working with.
const [itemOffset, setItemOffset] = useState(0);
// Simulate fetching items from another resources.
// (This could be items from props; or items loaded in a local state
// from an API endpoint with useEffect and useState)
const endOffset = itemOffset + itemsPerPage;
console.log(`Loading items from ${itemOffset} to ${endOffset}`);
const currentItems = items.slice(itemOffset, endOffset);
const pageCount = Math.ceil(items.length / itemsPerPage);
// Invoke when user click to request another page.
const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % items.length;
console.log(
`User requested page number ${event.selected}, which is offset ${newOffset}`
);
setItemOffset(newOffset);
};
return (
<>
>
);
}
// Add a
to your HTML to see the component rendered.
ReactDOM.render(
,
document.getElementById('container')
);
```
Test it on [CodePen](https://codepen.io/monsieurv/pen/abyJQWQ).
You can also read the code of [demo/js/demo.js](https://github.com/AdeleD/react-paginate/blob/master/demo/js/demo.js) to quickly understand how to make `react-paginate` work with a list of objects.
Finally there is this **[CodePen demo](https://codepen.io/monsieurv/pen/yLoMxYQ)**, with features fetching sample code (using GitHub API) and two synchronized pagination widgets.
## Props
| Name | Type | Description |
| ------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `pageCount` | `Number` | **Required.** The total number of pages. |
| `pageRangeDisplayed` | `Number` | The range of pages displayed. |
| `marginPagesDisplayed` | `Number` | 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. |
| `breakAriaLabels` | `Shape` | Aria labels of ellipsis elements (Default are `{ forward: 'Jump forward', backward: 'Jump backward' }`). |
| `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 changed. Exposes the current page object as an argument. |
| `onClick` | `Function` | A callback for any click on the component. Exposes information on the part clicked (for eg. `isNext` for next control), the next expected page `nextSelectedPage` & others. Can return `false` to prevent any page change or a number to override the page to jump to. |
| `onPageActive` | `Function` | The method to call when an active page is clicked. Exposes the active page object as an argument. |
| `initialPage` | `Number` | The initial page selected, in [uncontrolled mode](https://reactjs.org/docs/uncontrolled-components.html). Do not use with `forcePage` at the same time. |
| `forcePage` | `Number` | To override selected page with parent prop. Use this if you want to [control](https://reactjs.org/docs/forms.html#controlled-components) the page from your app state. |
| `disableInitialCallback` | `boolean` | Disable `onPageChange` callback with initial page. Default: `false` |
| `containerClassName` | `String` | The classname of the pagination container. |
| `className` | `String` | Same as `containerClassName`. For use with [styled-components](https://styled-components.com/) & other CSS-in-JS. |
| `pageClassName` | `String` | The classname on tag `li` of each page element. |
| `pageLinkClassName` | `String` | The classname on tag `a` of each page element. |
| `pageLabelBuilder` | `Function` | Function to set the text on page links. Defaults to `(page) => page` |
| `activeClassName` | `String` | The classname for the active page. It is concatenated to base class `pageClassName`. |
| `activeLinkClassName` | `String` | The classname on the active tag `a`. It is concatenated to base class `pageLinkClassName`. |
| `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. |
| `disabledLinkClassName` | `String` | The classname on tag `a` 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. |
| `hrefAllControls` | `Bool` | By default the `hrefBuilder` add `href` only to active controls. Set this prop to `true` so `href` are generated on all controls ([see](https://github.com/AdeleD/react-paginate/issues/242)). |
| `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 |
| `eventListener` | `String` | The event to listen onto before changing the selected page. Default is: `onClick`. |
| `renderOnZeroPageCount` | `Function` | A render function called when `pageCount` is zero. Let the Previous / Next buttons be displayed by default (`undefined`). Display nothing when `null` is provided. |
| `prevRel` | `String` | The `rel` property on the `a` tag for the prev page control. Default value `prev`. Set to `null` to disable. |
| `nextRel` | `String` | The `rel` propery on the `a` tag for the next page control. Default value `next`. Set to `null` to disable. |
| `prevPageRel` | `String` | The `rel` property on the `a` tag just before the selected page. Default value `prev`. Set to `null` to disable. |
| `selectedPageRel` | `String` | The `rel` propery on the `a` tag for the selected page. Default value `canonical`. Set to `null` to disable. |
| `nextPageRel` | `String` | The `rel` property on the `a` tag just after the selected page. Default value `next`. Set to `null` to disable. |
## Demo
To run the demo locally, clone the repository and move into it:
```console
git clone [email protected]:AdeleD/react-paginate.git
cd react-paginate
```
Install dependencies:
```console
npm install
```
Prepare the demo:
```console
npm run demo
```
Run the server:
```console
npm run serve
```
Open your browser and go to [http://localhost:3000/](http://localhost:3000/)
## Contribute
See [`CONTRIBUTE.md`](/CONTRIBUTE.md)