UNPKG

data-paginate

Version:

`data-paginate` is a React hook for handling pagination with an array of data. It provides an easy way to paginate data with simple navigation functions.

76 lines (62 loc) 2.26 kB
# data-paginate `data-paginate` is a React hook for handling pagination with an array of data. It provides an easy way to paginate data with simple navigation functions. ## Installation ```sh npm install data-paginate ``` ## Usage ```jsx import React from 'react'; import { usePagination } from 'data-paginate'; const data = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, // Add more items as needed ]; function MyComponent() { const limit = 10; // Number of items per page const { paginatedData, page, totalPages, nextPage, prevPage, goToPage } = usePagination(data, limit); return ( <div> <ul> {paginatedData.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> <div> <button onClick={prevPage} disabled={page === 1}> Previous </button> <span> Page {page} of {totalPages} </span> <button onClick={nextPage} disabled={page === totalPages}> Next </button> </div> <div> {Array.from({ length: totalPages }, (_, index) => ( <button key={index + 1} onClick={() => goToPage(index + 1)}> {index + 1} </button> ))} </div> </div> ); } export default MyComponent; ``` ## Props ### `usePagination` Hook Parameters - **`data`** *(Array)* - Array of items to paginate. - **`limit`** *(Number)* - Number of items per page. - **`initialPage`** *(Number, optional, default: `1`)* - Initial page number. ### `usePagination` Hook Return Value - **`paginatedData`** *(Array)* - Items for the current page. - **`page`** *(Number)* - Current page number. - **`totalPages`** *(Number)* - Total number of pages. - **`nextPage`** *(Function)* - Moves to the next page. - **`prevPage`** *(Function)* - Moves to the previous page. - **`goToPage(pageNumber)`** *(Function)* - Navigates to a specific page. ## License This project is licensed under the ISC License.