react-listing-pagination
v1.2.4
Published
react listing and paginating components that can generate numberic paginators.
Downloads
36
Maintainers
ash_hassanReadme
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 react-listing-paginationyarn add react-listing-pagination🔨 Usage
using items displayer which works with flexbox (rows, cols) along with paginator
import { useState } from 'react';
import { Listing, Pagination } from 'react-listing-pagination';
const CustomComponent = () => {
const [totalPages, setTotalPages] = useState(1000);
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 20;
const [items, setItems] = useState<any>([]);
return (
<>
<Listing
items={items}
display={'Grid'}
numberOfItemsPerRow={2}
isLoading={false}
loader={'ContentLoader'}
styles={{
itemClass: 'd-flex justify-content-center',
}}
>
<Pagination
totalItems={totalPages}
itemsPerPage={itemsPerPage}
currentPage={parseInt(currentPage.toString())}
displayedNumbersCount={6}
onPageChange={(pageNumber: number) => {
console.log(pageNumber);
}}
OnPreBtnClick={(pageNumber: number) => {
console.log(pageNumber);
}}
OnNextBtnClick={(pageNumber: number) => {
console.log(pageNumber);
}}
previousBtnContent={
<div className='d-flex font-gull-grey mt-0'>
<BsArrowLeft
size={20}
className={'arrow-pagination arrow-icon'}
/>
<div>
{intl.formatMessage({ id: 'global.pagination.previous' })}
</div>
</div>
}
nextBtnContent={
<div className='d-flex font-gull-grey mt-0'>
<div>
{intl.formatMessage({ id: 'global.pagination.next' })}
</div>
<BsArrowRight
size={20}
className={'arrow-pagination arrow-icon'}
/>
</div>
}
styles={{
position: 'center',
numberBtnClass: `px-3 ${BtnStyles['button-light']} mx-1`,
activeBtnClass: `${'active-button'} mx-1`,
}}
/>
</Listing>
</>
);
};
or you can only use the paggination logic
import { useState } from 'react';
import { Pagination } from 'react-listing-pagination';
const CustomComponent = () => {
return (
<>
<Pagination
totalPages={200}
currentPage={1}
displayedNumbersCount={6}
onPageChange={(pageNumber: number) => {
console.log("current page is " + pageNumber);
}}
firstBtnContent={"first"}
firstBtnProps={{
title: "First page",
}}
lastBtnContent={"last"}
lastBtnProps={{
title: "Last page",
}}
previousBtnContent={"previous"}
previousBtnProps={{
title: "Previous page",
}}
nextBtnContent={"next"}
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 | false | 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 totalItems & itemsPerPage are not assigned) | number of total pages. |
| totalItems | Number | true (if totalPages is not assigned) | number of total items. |
| itemsPerPage | Number | true (if totalPages is not assigned) | number of displayed items per page. |
| displayedNumbersCount | Number | false | number of displayed pagination buttons to be shown. /default [6] (important!! this number doesn't include gap property buttons count) |
| previousBtnContent | string or React Node | false | content for previous button. |
| nextBtnContent | string or React Node | false | content for next button. |
| firstBtnContent | string or React Node | false | content for first button. |
| lastBtnContent | string or React Node | false | content for last button. |
| numbersGapBtnContent | string or React Node | false | content for gap button whether to display numbers gap (...) to shortcut to first/last page or not. |
| 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. |
| onPageChange | (pageNumber) => void | false | invoked after current page changed. |
| onNumberBtnClick | (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 | false | 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. |