Skip to content

feat: added usePagination hook and corresponding tests#145

Open
yatishb23 wants to merge 1 commit into
DavidHDev:mainfrom
yatishb23:main
Open

feat: added usePagination hook and corresponding tests#145
yatishb23 wants to merge 1 commit into
DavidHDev:mainfrom
yatishb23:main

Conversation

@yatishb23

Copy link
Copy Markdown

Description

This PR introduces a new React hook usePagination to simplify managing pagination state in React applications. The hook exposes an intuitive API for navigating through pages while automatically handling edge cases (such as preventing navigation out of bounds).

Features added:

  • usePagination Hook:
    • Tracks the currentPage, defaulting to an initialPage or 1, and caps it relative to the provided totalPages.
    • Exposes navigation methods: nextPage, previousPage, firstPage, lastPage, and setPage.
    • Exposes calculated booleans for UI integrations: hasNext and hasPrevious.
  • Export additions: Added usePagination export to the main lib/index.ts.
  • Tests: Added comprehensive unit test coverage in usePagination.test.tsx to verify standard navigation, boundary limits, and state correctness.

Type of Change

  • New feature (non-breaking change which adds functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have added test cases that prove my feature works correctly
  • All existing and new tests pass locally

Example Usage:

import { usePagination } from 'haiku';

const MyComponent = () => {
    const { 
       currentPage, 
       totalPages, 
       nextPage, 
       previousPage, 
       hasNext, 
       hasPrevious 
    } = usePagination({ totalPages: 10, initialPage: 1 });

    return (
        <div>
            <p>Page {currentPage} of {totalPages}</p>
            <button onClick={previousPage} disabled={!hasPrevious}>Prev</button>
            <button onClick={nextPage} disabled={!hasNext}>Next</button>
        </div>
    );
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant