UNPKG

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
# 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