react-native-ultimate-paginator

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

npm install ultimate-pagination
# or
yarn add ultimate-pagination

Usage

Basic Numbered Pagination

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

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

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