'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

Installation

Paste this code into your project

Update import paths as needed

Properties

Build Beautiful Interfaces LikeSpectrum UI for Your Product

Build Beautiful Interfaces Like
Spectrum UI for Your Product