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 listing-pagination

yarn add listing-pagination

🔨 Usage

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

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

const CustomComponent = () => {
  const [totalPages, setTotalPages] = useState(1000);
  const [items, setItems] = useState<any>([]);

  return (
    <>
      <ListPagination
        items={items}
        display={'Grid'}
        numberOfItemsPerRow={2}
        isLoading={false}
        loader={'ContentLoader'}
        styles={{
          itemClass: 'd-flex justify-content-center',
        }}
      >
        <Pagination
          totalPages={totalPages}
          onChangePage={(pageNumber: number, event: any) => { console.log('current page is ' + pageNumber)}}
          currentPage={1}
          itemsPerPage={20}
          displayedNumbersCount={6}
          hasFirstLast={true}
          hasNextPrevious={true}
          firstBtnProps={{
            title: 'First page',
          }}
          lastBtnProps={{
            title: 'Last page',
          }}
          previousBtnProps={{
            title: 'Previous page',
          }}
          nextBtnProps={{
            title: 'Next page',
          }}
          styles={{
            position:'center',
            numberBtnClass: 'btn-primary',
          }}
        />
      </ListPagination>
    </>
  );
};

or you can only use the paggination logic

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

const CustomComponent = () => {
  const [totalPages, setTotalPages] = useState(1000);

  return (
    <>
        <Pagination
          totalPages={totalPages}
          onChangePage={(pageNumber: number, event: any) => { console.log('current page is ' + pageNumber)}}
          currentPage={1}
          itemsPerPage={20}
          displayedNumbersCount={6}
          hasFirstLast={true}
          hasNextPrevious={true}
          firstBtnProps={{
            title: 'First page',
          }}
          lastBtnProps={{
            title: 'Last page',
          }}
          previousBtnProps={{
            title: 'Previous page',
          }}
          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`	undefined	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 no totalItems)	number of total pages.
totalItems	`Number`	true (if no totalPages)	number of total items.
itemsPerPage	`Number`	true	number of displayed items per page.
displayedNumbersCount	`1,2,3,4,5,6,7,8`	false	number of displayed pagination buttons to be shown. /default 6
hasNextPrevious	`Boolean`	false	whether to display previous/next buttons or not.
previousBtnContent	`string \| React Node`	false	content for previous button.
nextBtnContent	`string \| React Node`	false	content for next button.
hasFirstLast	`Boolean`	false	whether to display first/last buttons or not.
firstBtnContent	`string \| React Node`	false	content for first button.
lastBtnContent	`string \| React Node`	false	content for last button.
hasNumbersGap	`Boolean`	false	whether to display numbers gap (...) to shortcut to first/last page or not.
numbersGapBtnContent	`string \| React Node`	false	content for gap button.
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.
onChangePage	`(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`	undefined	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.