React-listing-pagination NPM

React Listing and Paginating

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	Firefox	Chrome	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.