react-native-ultimate-paginator
Version:
A comprehensive pagination library supporting various pagination scenarios including server-side, client-side, infinite scroll, and load-more functionality
118 lines (96 loc) • 2.67 kB
Markdown
# Ultimate Pagination
A comprehensive pagination library for React applications that supports various pagination scenarios including server-side pagination, client-side pagination, infinite scroll, and load-more functionality.
## Features
- Multiple pagination modes:
- Traditional numbered pagination
- Infinite scroll
- Load more button
- Fully customizable UI components
- TypeScript support
- Accessibility compliant
- Responsive design
- Server-side and client-side pagination support
## Installation
```bash
npm install ultimate-pagination
# or
yarn add ultimate-pagination
```
## Usage
### Basic Numbered Pagination
```tsx
import { Pagination } from 'ultimate-pagination';
function MyComponent() {
return (
<Pagination
totalItems={100}
currentPage={1}
pageSize={10}
onPageChange={(page) => console.log(`Page changed to ${page}`)}
/>
);
}
```
### Infinite Scroll
```tsx
import { Pagination } from 'ultimate-pagination';
function MyComponent() {
const handleLoadMore = () => {
// Load more data
};
return (
<Pagination
totalItems={100}
currentPage={1}
pageSize={10}
displayMode="infinite-scroll"
infiniteScrollOptions={{
threshold: 100,
loading: false,
hasMore: true,
onLoadMore: handleLoadMore
}}
/>
);
}
```
### Load More Button
```tsx
import { Pagination } from 'ultimate-pagination';
function MyComponent() {
const handleLoadMore = () => {
// Load more data
};
return (
<Pagination
totalItems={100}
currentPage={1}
pageSize={10}
displayMode="load-more"
loadMoreOptions={{
loading: false,
hasMore: true,
buttonText: 'Load More',
loadingText: 'Loading...',
onLoadMore: handleLoadMore
}}
/>
);
}
```
## API Reference
### PaginationConfig
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| totalItems | number | - | Total number of items |
| currentPage | number | - | Current active page |
| pageSize | number | - | Number of items per page |
| maxPages | number | 5 | Maximum number of page buttons to show |
| displayMode | 'numbers' \| 'infinite-scroll' \| 'load-more' | 'numbers' | Pagination display mode |
| infiniteScrollOptions | InfiniteScrollOptions | - | Options for infinite scroll mode |
| loadMoreOptions | LoadMoreOptions | - | Options for load more mode |
| onPageChange | (page: number) => void | - | Callback when page changes |
| className | string | '' | Additional CSS class name |
| ariaLabel | string | 'Pagination' | Aria label for accessibility |
## License
MIT