Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@bazhe/paginator

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bazhe/paginator

Pagination utilties for handling pagination logic

  • 1.1.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10
increased by900%
Maintainers
1
Weekly downloads
 
Created
Source

@bazhe/paginator

@bazhe/paginator provides utilities for handling your pagination. Used in: @bazhe/use-pagination, @bazhe/with-pagination, @bazhe/with-wrapper

Getting Started

These instructions will get you started on using paginator utilities

Installing

npm

npm install @bazhe/paginator

yarn

yarn add @bazhe/paginator

Usage

Typescript usage example in: https://github.com/Blagoj5/pagination/blob/main/example/components/paginator-demo.tsx

Import

import { Paginator } from '@bazhe/paginator'; // The paginator class itself, provides with a lot of methods for building your pagination object
import { generatePaginator } from '@bazhe/paginator'; // Implements Paginator class and creates the paginator object. generatePaginator is an initializer for the Paginator class (in case you don't want to use it manually)

Initialization

generatePaginator accepts paginationOptions as argument

export const Paginator: React.FC = () => {
  return (
    <div
      style={{
        padding: '1rem',
        boxShadow: '2px 2px 7px 0 gray',
        width: '30%',
        background: 'white',
      }}
    >
      <h3>Generate paginator</h3>
      <pre>
        {JSON.stringify(
          generatePaginator({ items: [], currentPage: 1 }),
          null,
          2
        )}
      </pre>
    </div>
  );
};

API

API for:

  • generatePaginator(paginationOptions)
  • new Paginator(perPage, links)

Parameters

generatePaginator(paginationOptions):

Pagination Options

NameTypeDefaultDescription
itemsT[] | undefined[]Initial items for the pagination
limitnumber | undefined4The limit of items per page
currentPagenumber | undefined1The current page
linksnumber | undefined10Links is the number of pages/links/buttons to display. Example: How many buttons you want to show in the pagination bar?
totalResultsnumber | undefineditems.lengthTotal results is the maximum number of items. Usually refers to items.length (so there's no need to pass it)

Paginator
NameTypeDescription
constructor(perPage: number, links: number)The constructor that creates paginator object. Example: new Paginator(4, 10)
build<T>(total_results: number, current_page?: number, items?: T[]) => PaginationResultThe main methods that returns the fully expected pagination result
getFirstPage(currentPage: number) => numberGets first page, depending on the number of links (ex. buttons displayed in the pagination bar)
getLastPage(currentPage: number) => numberGets last page, depending on the number of links (ex. buttons displayed in the pagination bar)
getFirstResult(currentPage: number) => numberGets first result/index, depending on the limit/perPage and current page
getLastResult(currentPage: number) => numberGets last result/index, depending on the limit/perPage and current page

Pagination Result/Return

The result from generatePaginator or Paginator.build:

NameTypeDescription
itemsT[] | undefinedThe items that will change depending on the pagination (currentPage, limit ...)
all_itemsT[] | undefinedInitial/All items for the pagination
total_pagesnumber | undefinedThe total pages for the provided items. Example: 12 items with limit 2 -> 6 total pages
pagesnumberThe number of pages between range(first_page, last_page)
current_pagenumberCurrent page
first_pagenumberFirst page, depends on the link (buttons/links to display in the pagination bar) and limit (items per page)
last_pagenumberLast page, depends on the link (buttons/links to display in the pagination bar) and limit (items per page)
previous_pagenumberPrevious page, current_page - 1
next_pagenumberNext page, current_page + 1
has_previous_pageboolean
has_next_pageboolean
total_resultsnumberThe length of the initial items
resultsnumberResults per page
first_resultnumberFirst result is the index of the item that's first for the current page - items[first_result] (depends on link and limit)
last_resultnumberLast result is the index of the item that's last for the current page - items[last_result] (depends on link and limit)
limitnumberThe limit of items per page

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

  • Blagoj Petrov

Security

This project doesn’t have any security concerns.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Keywords

FAQs

Package last updated on 13 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc