A lightweight element organizing component allowing high customization for pagination, implemented in React.
There are many UI frameworks, such as Bootstrap, which provide beautifully styled pagination components. However, you still need to place the components and control their visibility correctly to assure functionality. React-Pagin helps you organize your pagination components marvellously.
On the other hand, some React UI frameworks package everything into one component, using a black box design.
Well, it seems convenient. But, how can you change the styles of the inner elements?
Oh! Let's check the DOM tree and the class names carefully, and then add some declarations to the global CSS file, even when you are just styling a specific pagination bar!
Okay! But now I want to change the number of buttons shown on the bar. Ug...
Let React-Pagin solves these problems.
npm i @quicksilver0218/react-pagin
import Pagination from "@quicksilver0218/react-pagin";
const MyComponent = (/* ... */) => {
// ...
return (
// ...
<Pagination
currentPage={}
pageCount={}
edgeItemCount={}
middleItemRange={}
parentElement={}
firstElement={}
lastElement={}
previousElement={}
nextElement={}
pageElement={}
pageProps={}
ellipsisElement={}
ellipsisProps={}
ellipsisSize={}
/>
// ...
);
}
| Property | Type | Description |
|---|---|---|
| currentPage | number | The page number of the current page, which starts from 1. |
| pageCount | number | The total quantity of pages. |
| edgeItemCount? | number | The quantity of items shown near each edge when the current page is far away from the edge. Default 1. |
| middleItemRange? | number | The quantity of items shown on each side near the current page item. Default 3. |
| parentElement? | ElementType | The base component wrapping all the content. |
| firstElement? | ReactNode | The first element under the parent, usually the button navigating to the first page. |
| lastElement? | ReactNode | The last element under the parent element, usually the button navigating to the last page. |
| previousElement? | ReactNode | The element behind firstElement, usually the button navigating to the previous page. |
| nextElement? | ReactNode | The element in front of lastElement, usually the button navigating to the next page. |
| pageElement | ComponentType<{ page: number; props: any }> | The element that represents a page. The quantity of instances is controlled by edgeItemCount and middleItemRange, and of course pageCount. It is also controlled by ellipsisSize depends on currentPage. The page number will be passed to page. |
| pageProps? | any | Other properties to be passed to props in pageElement. |
| ellipsisElement? | ComponentType<{ side: 'start' | 'end'; props: any }> | The element shown between the edge items and the middle items when the current page is far away from the edge. "start" or "end" representing the side it being placed will be passed to side. |
| ellipsisProps? | any | Other properties to be passed to props in ellipsisElement. |
| ellipsisSize? | number | The size of ellipsisElement, measured in times of the size of pageElement. It does not affect the visual size of ellipsisElement. It is only used to control the quantity of pageElement to be shown between the edge items and the middle items. Default 1 if ellipsisElement is assigned, otherwise default 0. |
It can be integrated with any UI frameworks such as React Bootstrap and Ant Design.
Here are the examples:
- React Bootstrap: CodeSandbox
- Ant Design: CodeSandbox
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent