FreshScroll

This is core component of the library. It is a wrapper around the IntersectionObserver API that provides a simple way to manipulate infinite scrolling functionality.

import { FreshScroll } from "fresh-scroll";

Props

components

Component configuration object containing:

• contentReact component to render each content item (required)
• loaderLoading indicator component (required)
• errorError component or function returning an error component. Function receives a retry callback.
• emptyEmpty state component or function returning an empty state component. Function receives a retry callback.

<FreshScroll 
  components={{
    content: Content  
    loader: <div>Loading...</div>,
    error: (retry) => <button onClick={retry}>Retry</button>,
    empty: (retry) => <button onClick={retry}>Retry</button>,
}} />

loadNext

Function that returns a Promise resolving to an array of items. Called when more data needs to be loaded.

async function loadNext() {
  const data = await getData();
  return data;
}
 
<FreshScroll 
  loadNext={loadNext}
/>

initialData

Optional array of initial items to populate the list with.

const initialData = [{
  id: 1,
  name: "Item 1",
}, {
  id: 2,
  name: "Item 2",
}]
 
<FreshScroll 
  initialData={initialData}
/>

observerOptions

Optional configuration options for the IntersectionObserver. See IntersectionObserver options.

<FreshScroll 
  observerOptions={{
    rootMargin: "200px",
    threshold: 0.5,
    root: document.getElementById("root"),
  }}
/>

containerProps

Optional props to be spread on the container div element.

<FreshScroll 
  containerProps={{
    className: "flex flex-col gap-4",
  }}
/>