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