Catify React Pagination is a utility component that provides pagination functionality for a given dataset in React applications. It allows you to easily implement pagination and navigate through data in a paginated manner. This component is part of the Catify JS library. It uses https://www.npmjs.com/package/catify-pagination underneath the hood.
- Import the necessary dependencies:
import { Pagination } from "catify-pagination"; import { useState, useEffect, useRef } from "react";
- Import the
catify-react-pagination
component:
import { PaginationComponent } from "catify-react-pagination";
- Create a React component that uses the
PaginationComponent
:
`const YourComponent = () => { // Define your data and itemsPerPage
const renderCallback = (data, page, totalPages) => { // Implement your logic to update the UI with the current page data, page number, and total pages };
useEffect(() => { // Initialize pagination const paginationRef = new Pagination(data, itemsPerPage, renderCallback);
// Render initial pagination
paginationRef.render();
}, [data, itemsPerPage]);
return (
-
Customize the
renderCallback
function to update your UI with the current page data, page number, and total pages. -
Implement the rendering logic in your component's JSX to display the paginated data and the pagination links.
-
Make sure to provide a valid DOM element with the id
"pagination"
where the pagination links will be rendered.
The PaginationComponent
accepts the following props:
-
data
(array): The array of data to be paginated. -
itemsPerPage
(number): The number of items to be displayed per page.
Here is a codebox vanilla javascript implementation: https://codesandbox.io/s/catify-pagination-react-example-l7b693
This project is licensed under the MIT License.
If you encounter any issues or have suggestions for improvements, please create an issue on the GitHub repository.
This utility was developed by MagicTheCat.
For more information, please visit the GitHub repository.