@infinite-scroll-area/svelte

A composable Svelte 5 component that wires @scroll-area/svelte (controller, track, edge fades, hover-to-scroll nav) and @infinite-scroll-kit/svelte (threshold-based loading, pull-to-refresh) into one ready-to-use scrollable surface. Both source packages remain fully usable on their own — this package is purely the wiring layer between them, and re-exports everything from both so you can drop down to their lower-level primitives (constants, utility functions, the underlying ScrollController class, etc.) without a separate install.

Install

pnpm add @infinite-scroll-area/svelte @scroll-area/svelte @infinite-scroll-kit/svelte

Requires svelte@^5.0.0 as a peer dependency.

Quick start

<script lang="ts">
	import { InfiniteScrollArea } from '@infinite-scroll-area/svelte';

	let items = $state([1, 2, 3]);
	let hasMore = $state(true);

	async function loadMore() {
		const next = await fetchNextPage();
		items = [...items, ...next];
		if (next.length === 0) hasMore = false;
	}
</script>

<InfiniteScrollArea
	area={{ orientation: 'vertical' }}
	infinite={{ loadMore, hasMore }}
	class="h-96"
>
	{#snippet children(ctx)}
		{#each items as item}
			<div class="border-b p-4">{item}</div>
		{/each}
	{/snippet}
</InfiniteScrollArea>

Configuration

InfiniteScrollArea takes two independent, optional config blocks — either can be omitted (false) to opt out of that half entirely:

• area — the physical scroll surface: orientation, nav arrows, edge fades, hover-to-scroll, RTL. See @scroll-area/svelte's ScrollAreaProps.
• infinite — the data-fetching lifecycle: loadMore, hasMore, enabled, threshold, pull-to-refresh. See @infinite-scroll-kit/svelte's InfiniteScrollProps. These are one-way props (the published component doesn't mark them $bindable()), so drive hasMore/enabled/threshold from your own $state if you need to update them after the initial render.

If both are false, the component is a transparent passthrough that just renders children.

Every nav/fade/status element is overridable via snippets on area (navigation, prevButton, nextButton) — see @scroll-area/svelte's and @infinite-scroll-kit/svelte's own READMEs for the full snippet list.

Exports

Besides InfiniteScrollArea and its own types (InfiniteScrollAreaProps, InfiniteScrollAreaClasses), this package re-exports everything from @scroll-area/svelte and @infinite-scroll-kit/svelte — components, low-level utilities, constants, and types — so a related but different feature can be built on the same primitives without a duplicate install.

License

MIT