\n\n## ✨ Features\n\n- 🛠 State-only hook & callbacks, you provide your own UI controls\n- 📦 Compatible with any pagination method like [GraphQL Relay Cursor](https://facebook.github.io/relay/graphql/connections.htm), OData, etc.\n- ⚡️ Works with both server side and client side pagination\n- 🐜 Simple and lightweight — less than 2KB gzipped\n\n## Example\n\n```jsx\nimport { usePagination } from \"react-use-pagination\";\n\nfunction App() {\n const [data] = React.useState([]); // <- your data\n\n const {\n currentPage,\n totalPages,\n setNextPage,\n setPreviousPage,\n nextEnabled,\n previousEnabled,\n startIndex,\n endIndex,\n } = usePagination({ totalItems: data.length });\n\n return (\n
\n \n\n \n \n Current Page: {currentPage} of {totalPages}\n \n \n
\n );\n}\n```\n\n## API\n\n`const paginationState = usePagination(options);`\n\n### `options`\n\n```ts\ntype Options = {\n totalItems: number;\n initialPage?: number; // (default: 0)\n initialPageSize?: number; // (default: 0)\n};\n```\n\n### `paginationState`\n\n```ts\ntype PaginationState = {\n // The current page\n currentPage: number;\n\n // The first index of the page window\n startIndex: number;\n\n // The last index of the page window\n endIndex: number;\n\n // Whether the next button should be enabled\n nextEnabled: number;\n\n // Whether the previous button should be enabled\n previousEnabled: number;\n\n // The total page size\n pageSize: number;\n\n // Jump directly to a page\n setPage: (page: number) => void;\n\n // Jump to the next page\n setNextPage: () => void;\n\n // Jump to the previous page\n setPreviousPage: () => void;\n\n // Set the page size\n setPageSize: (pageSize: number, nextPage?: number = 0) => void;\n};\n```\n\n### Client Side Pagination\n\n`startIndex` and `endIndex` can be used to implement client-side pagination. The simplest possible usage is to pass these properties directly to `Array.slice`:\n\n```jsx\nconst [data] = React.useState([\"apple\", \"banana\", \"cherry\"]);\nconst { startIndex, endIndex } = usePagination({ totalItems: data.length, initialPageSize: 1 });\n\nreturn (\n
\n);\n```\n\n### Server Side Pagination\n\n`startIndex` and `pageSize` can be used to implement a standard limit/offset (also known as top/skip) type of pagination:\n\n```jsx\n// Keep track of length separately from data, since data fetcher depends on pagination state\nconst [length, setLength] = React.useState(0);\n\n// Pagination hook\nconst { startIndex, pageSize } = usePagination({ totalItems: length, initialPageSize: 1 });\n\n// Fetch Data\nconst [_, data] = usePromise(\n React.useCallback(\n () => fetchUsers({ offset: startIndex, limit: pageSize }),\n [startIndex, pageSize]\n )\n);\n\n// When data changes, update length\nReact.useEffect(() => {\n setLength(data.length);\n}, [data]);\n\nreturn (\n
\n);\n```\n","readmeFilename":"README.md","description":"A React hook to help manage pagination state","homepage":"https://github.com/erictooth/react-use-pagination/blob/master/README.md","repository":{"type":"git","url":"git+https://github.com/erictooth/react-use-pagination.git"},"author":{"name":"erictooth"},"bugs":{"url":"https://github.com/erictooth/react-use-pagination/issues"}}
\n![\"MIT](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\n \n \n ![](\"https://img.shields.io/npm/v/react-use-pagination.svg\")
\n \n \n ![\"Code](\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\"){kind=icon}
\n \n ![\"100%](\"https://img.shields.io/badge/coverage-100%25-brightgreen.svg\"){kind=icon}
\n \n