Loop Mode

Example

function LoopModeExample() {
  const [currentItems, setCurrentItems] = useState(ITEMS.slice(0, 5));
 
  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold">Loop Mode</h2>
      <p className="text-neutral-600">Pagination with infinite loop navigation</p>
 
      <div className="rounded-lg border p-4">
        <p>Current page items: {currentItems.length}</p>
      </div>
 
      <Pagination
        totalItems={ITEMS.length}
        defaultPageSize={5}
        isLoop={true}
        onChange={({ currentPage, pageSize }) => {
          const start = (currentPage - 1) * pageSize;
          setCurrentItems(ITEMS.slice(start, start + pageSize));
        }}
      />
    </div>
  );
}

Loop Mode Features

Enabling Loop Mode

Simply set the isLoop prop to true:

<Pagination
  isLoop={true}
  // ... other props
/>

Navigation Behavior

In loop mode:

• Clicking "next" on the last page returns to the first page
• Clicking "previous" on the first page goes to the last page

Customizing Loop Transition

Add custom transition effects:

<Pagination
  isLoop={true}
  loopTransition="slide" // or "fade"
  loopTransitionDuration={300}
  // ... other props
/>

Use Cases

1. Image Galleries: Perfect for cycling through images
2. Carousel Navigation: Ideal for continuous content rotation
3. Infinite Lists: Great for cyclical content viewing
4. Product Showcases: Seamless product browsing

Best Practices

1. Visual Indicators:

   • Show current position in the loop
   • Indicate that content loops infinitely

2. Performance:

   function OptimizedLoopExample() {
     // Pre-cache adjacent pages
     const [cachedItems, setCachedItems] = useState({});
     
     useEffect(() => {
       // Cache next and previous pages
       const cacheAdjacentPages = (currentPage) => {
         const nextPage = currentPage === totalPages ? 1 : currentPage + 1;
         const prevPage = currentPage === 1 ? totalPages : currentPage - 1;
         // Cache logic here
       };
     }, [currentPage]);
   }

3. Accessibility:

   • Announce page changes to screen readers
   • Maintain keyboard navigation support

4. User Experience:

   • Consider adding transition animations
   • Provide clear navigation cues