1.0.4 • Published 8 months ago

@cherry-soft/react-native-basic-pagination v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

react-native-basic-pagination

PRs Welcome LICENSE supports Android supports web runs with expo

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 buttonsWith last page buttonsDisplay many pages

You can display as many pages as you want!

Props

PropertyDefaultDescription
totalItemsrequiredThe amount of items contained in all pages.
currentPagerequiredThe state which stores the current page.
onPageChangerequiredA function which receives a number to handle the page change.(page: number) => void
pageSize1The amount of items per page.
pagesToDisplay3The amount of buttons to display before the dots. ("...")
showLastPageButtonsfalseShow or hide the last pages buttons. ("<<" & ">>")
containerStylenullOptional styles for the container.Can be used to change width or flex direction.
btnStylenullOptional styles for the container of the buttons.
textStylenullOptional styles for the text of the buttons.
activeBtnStylenullOptional styles for the container of the current active page.
activeTextStylenullOptional styles for the text of the current active page.