❤
npm
Sign UpSign In

react-listing-pagination
TypeScript icon, indicating that this package has built-in type declarations

1.2.4 • Public • Published

React Listing and Paginating

NPM  

NPM version NPM downloads Issues need help

Live demo

✨ Features

  • 📦 flixible to customize and injecting components.
  • 🛡 Written in TypeScript with predictable static types.
  • ⚙️ loader and content loading.
  • 🎨 simple and easy styles that can be overwritten.
  • ♊ RTL support.

🖥 Environment Support

  • Modern browsers and Internet Explorer 11
IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari
IE11, Edge last 2 versions last 2 versions last 2 versions

📦 Install

npm install --save react-listing-pagination
yarn add react-listing-pagination

🔨 Usage

using items displayer which works with flexbox (rows, cols) along with paginator

import { useState } from 'react';
import { Listing, Pagination } from 'react-listing-pagination';

const CustomComponent = () => {
  const [totalPages, setTotalPages] = useState(1000);
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;
  const [items, setItems] = useState<any>([]);

  return (
    <>
      <Listing
        items={items}
        display={'Grid'}
        numberOfItemsPerRow={2}
        isLoading={false}
        loader={'ContentLoader'}
        styles={{
          itemClass: 'd-flex justify-content-center',
        }}
      >
          <Pagination
            totalItems={totalPages}
            itemsPerPage={itemsPerPage}
            currentPage={parseInt(currentPage.toString())}
            displayedNumbersCount={6}
            onPageChange={(pageNumber: number) => {
              console.log(pageNumber);
            }}
            OnPreBtnClick={(pageNumber: number) => {
              console.log(pageNumber);
            }}
            OnNextBtnClick={(pageNumber: number) => {
              console.log(pageNumber);
            }}
            previousBtnContent={
              <div className='d-flex font-gull-grey mt-0'>
                <BsArrowLeft
                  size={20}
                  className={'arrow-pagination arrow-icon'}
                />
                <div>
                  {intl.formatMessage({ id: 'global.pagination.previous' })}
                </div>
              </div>
            }
            nextBtnContent={
              <div className='d-flex font-gull-grey mt-0'>
                <div>
                  {intl.formatMessage({ id: 'global.pagination.next' })}
                </div>
                <BsArrowRight
                  size={20}
                  className={'arrow-pagination arrow-icon'}
                />
              </div>
            }
            styles={{
              position: 'center',
              numberBtnClass: `px-3 ${BtnStyles['button-light']} mx-1`,
              activeBtnClass: `${'active-button'} mx-1`,
            }}
          />
      </Listing>
    </>
  );
};

or you can only use the paggination logic

import { useState } from 'react';
import { Pagination } from 'react-listing-pagination';

const CustomComponent = () => {
  return (
    <>
      <Pagination
        totalPages={200}
        currentPage={1}
        displayedNumbersCount={6}
        onPageChange={(pageNumber: number) => {
          console.log("current page is " + pageNumber);
        }}
        firstBtnContent={"first"}
        firstBtnProps={{
          title: "First page",
        }}
        lastBtnContent={"last"}
        lastBtnProps={{
          title: "Last page",
        }}
        previousBtnContent={"previous"}
        previousBtnProps={{
          title: "Previous page",
        }}
        nextBtnContent={"next"}
        nextBtnProps={{
          title: "Next page",
        }}
        styles={{
          position: "center",
          numberBtnClass: "btn-primary",
        }}
      />
    </>
  );
};

RTL suport

simply by adding dir prop to html tag the package with switch to rtl.

<html dir="rtl">
<Pagination/>
</html>
<html dir="ltr">
<Pagination/>
</html>

TypeScript

this package is written in TypeScript, check Use in TypeScript to get started.

listing Props

Prop Type Required Description
children React Node false should be paginating component as a child.
items Array of React Node true an array of components to be displayed.
numberOfItemsPerRow Number false number of items each row it only available in display Grid.
display Grid , Rows false items displaying style / default [Grid].
isLoading Boolean false used for loading time / default [false].
loader React Node , 'ContentLoader' false placeholder for items (ContentLoader for prebuilt loader).
header React Node false header.
footerLeftActions React Node false left section next to children.
footerRightActions React Node false right section next to children.
styles Object false contains classes for styling different sections.

listing Styles Object

Prop Type Required Description
containerClass 'start' , 'center' , 'end' false positioning buttons horizontally.
headerClass string false buttons wrapper css class.
itemClass string false next button css class.
footerClass string false previous button css class.

Paginating Props

Prop Type Required Description
currentPage Number true current page number.
totalPages Number true (if totalItems & itemsPerPage are not assigned) number of total pages.
totalItems Number true (if totalPages is not assigned) number of total items.
itemsPerPage Number true (if totalPages is not assigned) number of displayed items per page.
displayedNumbersCount Number false number of displayed pagination buttons to be shown. /default [6] (important!! this number doesn't include gap property buttons count)
previousBtnContent string or React Node false content for previous button.
nextBtnContent string or React Node false content for next button.
firstBtnContent string or React Node false content for first button.
lastBtnContent string or React Node false content for last button.
numbersGapBtnContent string or React Node false content for gap button whether to display numbers gap (...) to shortcut to first/last page or not.
numberBtnProps HTML Button native props defaults native props of page number button.
previousBtnProps HTML Button native props defaults native props of previous page button.
nextBtnProps HTML Button native props defaults native props of next page button.
firstBtnProps HTML Button native props defaults native props of first page button.
lastBtnProps HTML Button native props defaults native props of last page button.
onPageChange (pageNumber) => void false invoked after current page changed.
onNumberBtnClick (pageNumber, event?) => void false invoked after clicking on a paginating number.
OnPreBtnClick (pageNumber, event?) => void false invoked after clicking on a paginating previous button.
OnNextBtnClick (pageNumber, event?) => void false invoked after clicking on a paginating next button.
OnFirstBtnClick (pageNumber, event?) => void false invoked after clicking on a paginating first button.
OnLastBtnClick (pageNumber, event?) => void false invoked after clicking on a paginating last button.
styles Object false contains classes for styling different sections.

Paginating Styles Object

Prop Type Required Description
position 'start' , 'center' , 'end' false positioning buttons horizontally.
containerClass string false buttons wrapper css class.
numberBtnClass string false page number button css class.
nextBtnClass string false next button css class.
previousBtnClass string false previous button css class.
firstBtnClass string false first button css class.
lastBtnClass string false last button css class.
activeBtnClass string false active button css class.

🔗 Links

Readme

Keywords

Package Sidebar

Install

npm i react-listing-pagination

Repository

github.com/ashrfhassan/react-listing-paginating

Homepage

github.com/ashrfhassan/react-listing-paginating#readme

Weekly Downloads

3

Version

1.2.4

License

ISC

Unpacked Size

184 kB

Total Files

17

Last publish

Collaborators

  • ash_hassan
Try on RunKit
Report malware