npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-listing-pagination

v1.2.4

Published

react listing and paginating components that can generate numberic paginators.

Downloads

17

Readme

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