Ts-paginator NPM

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