React render props component & custom hook for pagination.
Overview
The Paginated component provides a streamlined solution for implementing pagination in React applications. With its headless design, it allows developers to focus on functionality without being tied to a specific UI style. Although it is no longer actively maintained and users are encouraged to transition to GhostUI, it’s important to understand its capabilities for those who may still find it useful for their projects.
This component emphasizes flexibility and ease of use, presenting a simple API that ensures minimal bloat while maintaining essential features needed for effective pagination management.
Features
- Headless Component: Allows full customization of the UI without imposing any design restrictions.
- Style Free: Primarily focused on pagination functionality rather than its appearance.
- Lightweight: Offers a small bundle size, making it efficient for use in applications.
- Tested with RTL: Ensures compatibility and correctness with React Testing Library for reliable functionality.
- Render Props & Hooks: Provides both render props and hooks for flexibility in how pagination is implemented.
- Current and Total Pages: Requires specific props for managing current page and total pages, ensuring clear functionality.
- Boundary and Sibling Sizes: Customizable parameters that allow for control over boundary and sibling items for tailored pagination experiences.
- Truncation Indicators: Features boolean flags to easily determine if previous or next page items are truncated, enhancing usability.
