react-listing-pagination

v1.2.4

Published

3 months ago

react listing and paginating components that can generate numberic paginators.

Downloads

0High
0Medium
0Low

ash_hassan

React React-component Components Frontend Lazyloading Listing Paginating Data pagination Paginator Paginate

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

🔗 Links

Change Log