React Listing and Paginating
Live demo
✨ Features
📦 flixible to customize and injecting components.🛡 Written in TypeScript with predictable static types.⚙️ loader and content loading.🎨 simple and easy styles that can be overwritten.♊ RTL support.
🖥 Environment Support
- Modern browsers and Internet Explorer 11
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
📦 Install
npm install --save listing-paginationyarn add listing-pagination🔨 Usage
using items displayer which works with flexbox (rows, cols) along with paginator
import { useState } from 'react';
import { ListPagination, Pagination } from 'listing-pagination';
const CustomComponent = () => {
const [totalPages, setTotalPages] = useState(1000);
const [items, setItems] = useState<any>([]);
return (
<>
<ListPagination
items={items}
display={'Grid'}
numberOfItemsPerRow={2}
isLoading={false}
loader={'ContentLoader'}
styles={{
itemClass: 'd-flex justify-content-center',
}}
>
<Pagination
totalPages={totalPages}
onChangePage={(pageNumber: number, event: any) => { console.log('current page is ' + pageNumber)}}
currentPage={1}
itemsPerPage={20}
displayedNumbersCount={6}
hasFirstLast={true}
hasNextPrevious={true}
firstBtnProps={{
title: 'First page',
}}
lastBtnProps={{
title: 'Last page',
}}
previousBtnProps={{
title: 'Previous page',
}}
nextBtnProps={{
title: 'Next page',
}}
styles={{
position:'center',
numberBtnClass: 'btn-primary',
}}
/>
</ListPagination>
</>
);
};or you can only use the paggination logic
import { useState } from 'react';
import { ListPagination, Pagination } from 'listing-pagination';
const CustomComponent = () => {
const [totalPages, setTotalPages] = useState(1000);
return (
<>
<Pagination
totalPages={totalPages}
onChangePage={(pageNumber: number, event: any) => { console.log('current page is ' + pageNumber)}}
currentPage={1}
itemsPerPage={20}
displayedNumbersCount={6}
hasFirstLast={true}
hasNextPrevious={true}
firstBtnProps={{
title: 'First page',
}}
lastBtnProps={{
title: 'Last page',
}}
previousBtnProps={{
title: 'Previous page',
}}
nextBtnProps={{
title: 'Next page',
}}
styles={{
position:'center',
numberBtnClass: 'btn-primary',
}}
/>
</>
);
};RTL suport
simply by adding dir prop to html tag the package with switch to rtl.
<html dir="rtl">
<Pagination/>
</html>
<html dir="ltr">
<Pagination/>
</html>TypeScript
this package is written in TypeScript, check Use in TypeScript to get started.
listing Props
| Prop | Type | Required | Description |
|---|---|---|---|
| children | React Node |
false | should be paginating component as a child. |
| items | Array of React Node |
true | an array of components to be displayed. |
| numberOfItemsPerRow | Number |
false | number of items each row it only available in display Grid. |
| display | Grid , Rows |
false | items displaying style / default [Grid]. |
| isLoading | Boolean |
false | used for loading time / default [false]. |
| loader | React Node , 'ContentLoader' |
false | placeholder for items (ContentLoader for prebuilt loader). |
| header | React Node |
false | header. |
| footerLeftActions | React Node |
false | left section next to children. |
| footerRightActions | React Node |
false | right section next to children. |
| styles | Object |
undefined | contains classes for styling different sections. |
listing Styles Object
| Prop | Type | Required | Description |
|---|---|---|---|
| containerClass | 'start' , 'center' , 'end' |
false | positioning buttons horizontally. |
| headerClass | string |
false | buttons wrapper css class. |
| itemClass | string |
false | next button css class. |
| footerClass | string |
false | previous button css class. |
Paginating Props
| Prop | Type | Required | Description |
|---|---|---|---|
| currentPage | Number |
true | current page number. |
| totalPages | Number |
true (if no totalItems) | number of total pages. |
| totalItems | Number |
true (if no totalPages) | number of total items. |
| itemsPerPage | Number |
true | number of displayed items per page. |
| displayedNumbersCount | 1,2,3,4,5,6,7,8 |
false | number of displayed pagination buttons to be shown. /default [6] |
| hasNextPrevious | Boolean |
false | whether to display previous/next buttons or not. |
| previousBtnContent | `string | React Node` | false |
| nextBtnContent | `string | React Node` | false |
| hasFirstLast | Boolean |
false | whether to display first/last buttons or not. |
| firstBtnContent | `string | React Node` | false |
| lastBtnContent | `string | React Node` | false |
| hasNumbersGap | Boolean |
false | whether to display numbers gap (...) to shortcut to first/last page or not. |
| numbersGapBtnContent | `string | React Node` | false |
| numberBtnProps | HTML Button native props |
defaults | native props of page number button. |
| previousBtnProps | HTML Button native props |
defaults | native props of previous page button. |
| nextBtnProps | HTML Button native props |
defaults | native props of next page button. |
| firstBtnProps | HTML Button native props |
defaults | native props of first page button. |
| lastBtnProps | HTML Button native props |
defaults | native props of last page button. |
| onChangePage | (pageNumber, event?) => void |
false | invoked after clicking on a paginating number. |
| OnPreBtnClick | (pageNumber, event?) => void |
false | invoked after clicking on a paginating previous button. |
| OnNextBtnClick | (pageNumber, event?) => void |
false | invoked after clicking on a paginating next button. |
| OnFirstBtnClick | (pageNumber, event?) => void |
false | invoked after clicking on a paginating first button. |
| OnLastBtnClick | (pageNumber, event?) => void |
false | invoked after clicking on a paginating last button. |
| styles | Object |
undefined | contains classes for styling different sections. |
Paginating Styles Object
| Prop | Type | Required | Description |
|---|---|---|---|
| position | 'start' , 'center' , 'end' |
false | positioning buttons horizontally. |
| containerClass | string |
false | buttons wrapper css class. |
| numberBtnClass | string |
false | page number button css class. |
| nextBtnClass | string |
false | next button css class. |
| previousBtnClass | string |
false | previous button css class. |
| firstBtnClass | string |
false | first button css class. |
| lastBtnClass | string |
false | last button css class. |
| activeBtnClass | string |
false | active button css class. |