react-native-basic-pagination

Welcome to react-native-basic-pagination!

react-native-basic-pagination provides a basic component to handle classic style pagination in your React Native app on Android and Web.

Installation

npm install @cherry-soft/react-native-basic-pagination

Example

import React, { useState } from 'react';
import Pagination from '@cherry-soft/react-native-basic-pagination';

const App = () => {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      totalItems={100}
      pageSize={5}
      currentPage={page}
      onPageChange={setPage}
    />
  );
};

Preview

| Without last page buttons | With last page buttons | Display many pages | | -------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | | | | |

You can display as many pages as you want!

Props

| Property | Default | Description | | ------------------- | ------------------ | --------------------------------------------------------------------------------------- | | totalItems | required | The amount of items contained in all pages. | | currentPage | required | The state which stores the current page. | | onPageChange | required | A function which receives a number to handle the page change.(page: number) => void | | pageSize | 1 | The amount of items per page. | | pagesToDisplay | 3 | The amount of buttons to display before the dots. ("...") | | showLastPageButtons | false | Show or hide the last pages buttons. ("<<" & ">>") | | containerStyle | null | Optional styles for the container.Can be used to change width or flex direction. | | btnStyle | null | Optional styles for the container of the buttons. | | textStyle | null | Optional styles for the text of the buttons. | | activeBtnStyle | null | Optional styles for the container of the current active page. | | activeTextStyle | null | Optional styles for the text of the current active page. |