Quick Start

This shows how to use the FreshScroll component and compose it with your own item component, loader, error and empty states.

import { FreshScroll } from "@artic-frost/fresh-scroll";

Define your item type

type Post = {
  id: number;
  title: string;
  content: string;
};

Create your item component

function PostComponent({ title, content }: Post) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

Define a loader function to fetch your data

  async function load(): Promise<Post[]> {
    const response = await fetch("/api/posts");
    return await response.json();
  }

Add the component to your page

function Page() {
  return (
      <FreshScroll
        loadNext={load}
        components={{
          content: PostComponent,
          loader: <div>Loading...</div>,
          error: retry => (
            <button onClick={retry}>Something went wrong. Try again</button>
          ),
          empty: retry => (
            <button onClick={retry}>
              Looks like we don't have any more posts. Try again
            </button>
        ),
      }}
    />
  );
}