Chakra UI Pagination Component
**Since there is a Pagination component in Chakra v3, use this package unless you are using chakra v2 or v1**
This is a pagination UI component designed for the popular [Chakra UI](https://github.com/chakra-ui/chakra-ui) component library. The library provides an easy-to-use and customizable pagination component that can be integrated seamlessly into your React applications.
Features
- Simple and intuitive pagination UI.
- Adaptable design and appearance to match ChakraProvider theme.
- Flexible configuration options.
- Lightweight and optimized for performance.
- Accessibility-friendly design.
Installation
To install the React Pagination UI Component Library, you can use npm or yarn:
npm install chakra-pagination
or
yarn add chakra-pagination
Usage
- Import the
Pagination component from the library:
import { Pagination } from 'chakra-pagination';
- Render the
Pagination component in your React component, passing the required props:
<Pagination
currentPage={currentPage}
onPageChange={handlePageChange}
total={total}
colorScheme={'cyan'}
perPage={10}
/>
Props
The Pagination component accepts the following props:
currentPage (number, required): The current active page number.onPageChange (function, required): A callback function triggered when the page changes. It receives the new page number as an argument.total (number, optional): Total number of items.perPage (number, optional): Specifies how many items are shown in each page to determine page numbers. Default: 10.colorScheme (string, optional): Set the theme color of the buttons and text of pagination component. Default: blackAlpha.
Examples
Here are a few examples demonstrating how to use the Pagination component:
Basic usage:
...
const [currentPage, setCurrentPage] = useState<number>(1);
<Pagination
currentPage={currentPage}
totalPages={10}
onPageChange={setCurrentPage}
/>
...
Screenshots
Contributing
Contributions are welcome! If you'd like to contribute to the Chakra Pagination Component, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make the necessary changes and commit them.
- Push the changes to your forked repository.
- Submit a pull request with a detailed description of your changes.
License
This project is licensed under the MIT License.
Acknowledgments
If you have any questions, feature requests, or issues, please don't hesitate to open an issue on the project repository.
