"use client"; import React from "react"; import InfiniteScroll from "@/components/ui/infinite-scroll"; import { Loader2 } from "lucide-react"; interface DummyProductResponse { products: DummyProduct[]; total: number; skip: number; limit: number; } interface DummyProduct { id: number; title: string; price: string; } const Product = ({ product }: { product: DummyProduct }) => { return (

{product.id} - {product.title}

{product.price}

); }; const InfiniteScrollDemo = () => { const [page, setPage] = React.useState(0); const [loading, setLoading] = React.useState(false); const [hasMore, setHasMore] = React.useState(true); const [products, setProducts] = React.useState([]); const next = async () => { setLoading(true); /** * Intentionally delay the search by 800ms before execution so that you can see the loading spinner. * In your app, you can remove this setTimeout. **/ setTimeout(async () => { const res = await fetch( `https://dummyjson.com/products?limit=3&skip=${3 * page}&select=title,price`, ); const data = (await res.json()) as DummyProductResponse; setProducts((prev) => [...prev, ...data.products]); setPage((prev) => prev + 1); // Usually your response will tell you if there is no more data. if (data.products.length < 3) { setHasMore(false); } setLoading(false); }, 800); }; return (

{products.map((product) => ( ))} {hasMore && }

); }; export default InfiniteScrollDemo;

Property	Type	Default
*`isLoading`	`boolean`
*`hasMore`	`boolean`
*`next`	`() => unknown`
`threshold`	`number`	`1`
`root`	`number`	`null`
`rootMargin`	`string`	`0px`
`reverse`	`boolean`	`false`
`children`	`ReactNode`	`undefined`

Infinite Scroll

Properties