ShakibDShy

Custom Boundaries

Learn how to customize boundary pages and sibling count in your pagination component.

Example

Custom Boundaries

Pagination with custom boundaries and siblings

function CustomBoundariesExample() {
  const [currentItems, setCurrentItems] = useState(ITEMS.slice(0, 5));
 
  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold">Custom Boundaries</h2>
      <p className="text-neutral-600">Pagination with custom boundaries and siblings</p>
 
      <Pagination
        totalItems={ITEMS.length}
        defaultPageSize={5}
        boundaries={2}
        siblingCount={2}
        dots="•••"
        onChange={({ currentPage, pageSize }) => {
          const start = (currentPage - 1) * pageSize;
          setCurrentItems(ITEMS.slice(start, start + pageSize));
        }}
      />
    </div>
  );
}

Customization Options

Boundary Pages

Control how many pages to show at the start and end:

<Pagination
  boundaries={2} // Shows 2 pages at start and end
  // ... other props
/>

Example with boundaries={2}:

1 2 ... 7 8 9 ... 19 20

Sibling Count

Set how many siblings to show around the current page:

<Pagination
  siblingCount={2} // Shows 2 siblings on each side
  // ... other props
/>

Example with siblingCount={2}:

1 ... 6 7 [8] 9 10 ... 20

Custom Dots

Customize the ellipsis/dots appearance:

<Pagination
  dots="•••"
  // or with custom component
  dots={<span className="custom-dots">...</span>}
  // ... other props
/>

Layout Examples

Minimal Layout

<Pagination
  boundaries={1}
  siblingCount={1}
  // Shows: 1 ... 4 5 [6] 7 8 ... 20
/>

Extended Layout

<Pagination
  boundaries={2}
  siblingCount={2}
  // Shows: 1 2 ... 4 5 [6] 7 8 ... 19 20
/>

Full Layout

<Pagination
  boundaries={3}
  siblingCount={3}
  // Shows: 1 2 3 4 5 [6] 7 8 9 ... 18 19 20
/>

Best Practices

  1. Balance vs Clarity:

    • Too many numbers can be overwhelming
    • Too few can make navigation difficult
    • Find the right balance for your use case
  2. Responsive Design:

    function ResponsiveBoundaries() {
      const [boundaries, setBoundaries] = useState(2);
      
      useEffect(() => {
        const updateBoundaries = () => {
          setBoundaries(window.innerWidth < 768 ? 1 : 2);
        };
        window.addEventListener('resize', updateBoundaries);
        return () => window.removeEventListener('resize', updateBoundaries);
      }, []);
      
      return (
        <Pagination
          boundaries={boundaries}
          siblingCount={window.innerWidth < 768 ? 1 : 2}
        />
      );
    }
  3. Visual Hierarchy:

    • Make the current page stand out
    • Keep dots visually distinct
    • Maintain consistent spacing
  4. Accessibility:

    • Ensure all numbers are clickable
    • Provide clear focus indicators
    • Add proper ARIA labels

Last updated on

On this page