Skip to content

WNortier/ts-paginator

Repository files navigation

ts-paginator

GitHub Workflow Status GitHub last commit (by committer)

npm npm type definitions

ts-paginator


ts-paginator is a TypeScript pagination hook for React or NextJS


Args

Instantiate the useTsPaginator hook with the following arguments:

Args Description
totalRecordCount: number The total count of records
currentPage: number The current page selection (zero indexed)
rowsPerPage: 10 (default 10) The current rows per page selection

UI/UX Functions

Function Description Args Return Type Example Returns
determinePaginationMessage Calculates the pagination message options?: { verb: 'Showing' OR 'Displaying', noun?: string, hideMessageOnZeroRecords: boolean } string Displaying 1 to 10 of 20 records
determineRowsPerPageOptions Calculates the rows per page options number[] [10]
determinePaginationPages Calculates the pagination pages and uses 0 as a range placeholder for page ranges greater than three number[] [1, 2]
determinePaginationDisabledState Can be used to disable the previous page or next page button boolean true

State Altering Functions

Function Description Args Return Type
handleChangeTotalRecordCount Changes the total record count newTotalRecordCount: number void
handleChangeRowsPerPage Changes the rows per page newRowsPerPage: number void
handleChangePage Changes the current page newPage: number void

Extra Functions

Not required to build working pagination, but might be useful. Coming soon.


Usage

npm i --save ts-paginator

import useTsPaginator from 'ts-paginator';

function MyComponent() {
  const {
    totalRecordCount,
    rowsPerPage,
    currentPage,
    _determinePaginationMessage,
    _determinePaginationDisabledState,
    _determinePaginationPages,
    _determineRowsPerPageOptions,
    _handleChangeTotalRecordCount,
    _handleChangeRowsPerPage,
    _handleChangePage,
  } = useTsPaginator(20, 0);

  const message = _determinePaginationMessage({ verb: 'Showing', noun: 'entries' }); // Showing 1 to 10 of 20 entries

  return <p>{message}</p>;
}

Release Notes

1.6.0

  • Adressed a shortcoming in _determinePaginationMessage not properly handling a totalRecordCount of 0
  • Added an optional noun key to the _determinePaginationMessage options parameter
  • Added an optional hideMessageOnZeroRecords key to the _determinePaginationMessage options parameter which, if set, returns the message as an empty string

Example

https://github.com/WNortier/ts-paginator-example

ts-paginator-example