Fluxo UIFluxo UIv0.1.1

InfiniteScroll

An infinite scroll component that automatically loads more content as the user scrolls, with error handling and customizable loading states.

Basic Usage

Scrollable List

Scroll down to automatically load more items. Shows a spinner during loading and end message when all items are loaded.

Item 1
Description for item 1
Item 2
Description for item 2
Item 3
Description for item 3
Item 4
Description for item 4
Item 5
Description for item 5
Item 6
Description for item 6
Item 7
Description for item 7
Item 8
Description for item 8
Item 9
Description for item 9
Item 10
Description for item 10
Item 11
Description for item 11
Item 12
Description for item 12
Item 13
Description for item 13
Item 14
Description for item 14
Item 15
Description for item 15
Item 16
Description for item 16
Item 17
Description for item 17
Item 18
Description for item 18
Item 19
Description for item 19
Item 20
Description for item 20
import { InfiniteScroll } from 'fluxo-ui';

const [items, setItems] = useState(generateItems(0, 20));
const [hasMore, setHasMore] = useState(true);

const loadMore = async () => {
  await new Promise((r) => setTimeout(r, 1000));
  const newItems = generateItems(items.length, 20);
  setItems((prev) => [...prev, ...newItems]);
  if (items.length + 20 >= 100) setHasMore(false);
};

<InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
  {items.map((item) => (
    <div key={item.id}>{item.title}</div>
  ))}
</InfiniteScroll>

Error Handling

Pass an error string to show an error message with a retry button. Use onRetry to clear the error and re-attempt loading.

Error Handling with Retry

When loading fails, an error message with a retry button is displayed. Every other load attempt simulates a failure.

Record 1
Record 2
Record 3
Record 4
Record 5
Record 6
Record 7
Record 8
Record 9
Record 10
import { InfiniteScroll } from 'fluxo-ui';

const [error, setError] = useState<string | null>(null);

const loadMore = async () => {
  await new Promise((r) => setTimeout(r, 800));
  // Simulate random failures
  if (Math.random() > 0.5) {
    throw new Error('Network error');
  }
  setItems((prev) => [...prev, ...newItems]);
};

<InfiniteScroll
  loadMore={loadMore}
  hasMore={hasMore}
  error={error}
  onRetry={() => { setError(null); loadMore(); }}
/>

Import

import { InfiniteScroll } from 'fluxo-ui';
import type { InfiniteScrollProps } from 'fluxo-ui';

Props

loadMorereq
() => Promise<void>

Async function to load more data.

hasMorereq
boolean

Whether there is more data to load.

isLoading
boolean"false"

External loading state control.

error
string | null

Error message to display.

onRetry
() => void

Called when the retry button is clicked.

threshold
number"200"

Pixel distance from bottom to trigger loading.

loader
ReactNode

Custom loading indicator.

endMessage
ReactNode

Message shown when all data is loaded.

errorMessage
ReactNode

Custom error display (overrides default).

scrollableTarget
string | HTMLElement

ID or element of the scrollable container.

inverse
boolean"false"

Load content at the top (chat-style).

childrenreq
ReactNode

List content to display.

className
string

Additional CSS class for the container.

Features

Intersection Observer

Uses IntersectionObserver for efficient scroll detection without scroll event listeners.

Error & Retry

Built-in error state display with a retry button to re-attempt loading.

Custom Loader

Replace the default spinner with any custom loading indicator.

Inverse Mode

Load content at the top of the container for chat-style interfaces.

Scrollable Target

Attach to any scrollable container by ID or element reference.

End Message

Display a custom message when all content has been loaded.