Components
Loading preview...
usePagination hook
npx shadcn@latest add https://21st.dev/r/originui/use-pagination"use client"
import { Button } from "@/components/ui/button"
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
} from "@/components/ui/pagination"
import { useState } from "react"
import { usePagination } from "@/components/hooks/use-pagination"
export function PaginationDemo() {
const [currentPage, setCurrentPage] = useState(1)
const totalPages = 20
const paginationItemsToDisplay = 7
const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({
currentPage,
totalPages,
paginationItemsToDisplay,
})
return (
<Pagination>
<PaginationContent>
<PaginationItem>
<Button
variant="outline"
size="icon"
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
disabled={currentPage === 1}
>
←
</Button>
</PaginationItem>
{showLeftEllipsis && (
<>
<PaginationItem>
<PaginationLink onClick={() => setCurrentPage(1)}>1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
</>
)}
{pages.map((page) => (
<PaginationItem key={page}>
<PaginationLink
onClick={() => setCurrentPage(page)}
isActive={currentPage === page}
>
{page}
</PaginationLink>
</PaginationItem>
))}
{showRightEllipsis && (
<>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationLink onClick={() => setCurrentPage(totalPages)}>
{totalPages}
</PaginationLink>
</PaginationItem>
</>
)}
<PaginationItem>
<Button
variant="outline"
size="icon"
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
disabled={currentPage === totalPages}
>
→
</Button>
</PaginationItem>
</PaginationContent>
</Pagination>
)
}