react-use-pagination

A React hook to help manage pagination state

✨ Features

- 🛠 State-only hook & callbacks, you provide your own UI controls
- 📦 Compatible with any pagination method like GraphQL Relay Cursor, OData, etc.
- ⚡️ Works with both server side and client side pagination
- 🐜 Simple and lightweight — less than 2KB gzipped

Example

``jsx
import { usePagination } from "react-use-pagination";

function App() {
const [data] = React.useState([]); // <- your data

const {
currentPage,
totalPages,
setNextPage,
setPreviousPage,
nextEnabled,
previousEnabled,
startIndex,
endIndex,
} = usePagination({ totalItems: data.length });

return (



);
}
`

API

const paginationState = usePagination(options);

$3

`ts
type Options = {
totalItems: number;
initialPage?: number; // (default: 0)
initialPageSize?: number; // (default: 0)
};
`

$3

`ts
type PaginationState = {
// The current page
currentPage: number;

// The first index of the page window
startIndex: number;

// The last index of the page window
endIndex: number;

// Whether the next button should be enabled
nextEnabled: number;

// Whether the previous button should be enabled
previousEnabled: number;

// The total page size
pageSize: number;

// Jump directly to a page
setPage: (page: number) => void;

// Jump to the next page
setNextPage: () => void;

// Jump to the previous page
setPreviousPage: () => void;

// Set the page size
setPageSize: (pageSize: number, nextPage?: number = 0) => void;
};
`

$3

startIndex and endIndex can be used to implement client-side pagination. The simplest possible usage is to pass these properties directly to Array.slice:

`jsx
const [data] = React.useState(["apple", "banana", "cherry"]);
const { startIndex, endIndex } = usePagination({ totalItems: data.length, initialPageSize: 1 });

return (


{data.slice(startIndex, endIndex).map((item) => (

• {item}

))}


);
`

$3

startIndex and pageSize can be used to implement a standard limit/offset (also known as top/skip) type of pagination:

`jsx
// Keep track of length separately from data, since data fetcher depends on pagination state
const [length, setLength] = React.useState(0);

// Pagination hook
const { startIndex, pageSize } = usePagination({ totalItems: length, initialPageSize: 1 });

// Fetch Data
const [_, data] = usePromise(
React.useCallback(
() => fetchUsers({ offset: startIndex, limit: pageSize }),
[startIndex, pageSize]
)
);

// When data changes, update length
React.useEffect(() => {
setLength(data.length);
}, [data]);

return (


{data.slice(startIndex, endIndex).map((item) => (

• {item}

))}


);
``