Wheel Pagination

Installation

Usage

import WheelPagination from "@/components/ruixen/wheel-pagination";
 
export default function App() {
  const handlePageChange = (page: number) => {
    console.log(`Current page: ${page + 1}`);
  };
 
  return (
    <WheelPagination
      totalPages={50}
      visibleCount={5}
      onChange={handlePageChange}
    />
  );
}

Props

Prop	Type	Default	Description
`totalPages`	`number`	`50`	Total number of pages
`visibleCount`	`number`	`5`	Number of page buttons visible at once
`onChange`	`function`	-	Callback when page changes
`className`	`string`	`""`	Additional CSS classes

Features

Mouse Wheel Support: Navigate pages using mouse wheel
Carousel View: Shows a sliding window of visible pages
Scale Animation: Active page scales up with spring animation
Arrow Navigation: Previous/next arrows with disabled states
Responsive: Automatically adjusts visible pages around current page

Interactions

Mouse Wheel Up: Go to previous page
Mouse Wheel Down: Go to next page
Click Page: Jump directly to that page
Arrow Buttons: Navigate one page at a time