scrolloop

Modern virtual and infinite scrolling components for React, React Native, Preact, Vue, and Svelte.

Note

As of 1.0, scrolloop is the framework-agnostic core. Install the adapter for your framework below (@scrolloop/react, @scrolloop/vue, …). Upgrading from scrolloop@0.5.x (React components)? Switch those imports to @scrolloop/react.

Install

React

npm install @scrolloop/react
# or
yarn add @scrolloop/react
# or
pnpm add @scrolloop/react

Preact

npm install @scrolloop/preact
# or
yarn add @scrolloop/preact
# or
pnpm add @scrolloop/preact

Vue

npm install @scrolloop/vue
# or
yarn add @scrolloop/vue
# or
pnpm add @scrolloop/vue

Svelte

npm install @scrolloop/svelte
# or
yarn add @scrolloop/svelte
# or
pnpm add @scrolloop/svelte

React Native

npm install @scrolloop/react-native
# or
yarn add @scrolloop/react-native
# or
pnpm add @scrolloop/react-native

Quick Start

React

import{VirtualList}from"@scrolloop/react";functionApp(){constitems=Array.from({length: 1000},(_,i)=>`Item #${i}`);return(<VirtualListcount={items.length}itemSize={50}height={400}renderItem={(index,style)=>(<divkey={index}style={style}>{items[index]}</div>)}/>);}

Preact

import{VirtualList}from"@scrolloop/preact";exportfunctionApp(){constitems=Array.from({length: 1000},(_,i)=>`Item #${i}`);return(<VirtualListcount={items.length}itemSize={50}height={400}renderItem={(index,style)=><divstyle={style}>{items[index]}</div>}/>);}

Vue

<script setup lang="ts">import { VirtualList } from"@scrolloop/vue";const items =Array.from({ length: 1000 }, (_, i) =>`Item #${i}`);</script>
<template>
<VirtualList :count="items.length" :item-size="50" :height="400">
<template #default="{ index, style }">
<div:style="style">{{ items[index] }}</div>
</template>
</VirtualList>
</template>

Svelte

<scriptlang="ts">import { VirtualList } from"@scrolloop/svelte";const items =Array.from({ length: 1000 }, (_, i) =>`Item #${i}`);</script>
<VirtualListcount={items.length} itemSize={50} height={400}>
{#snippetchildren(index, style)}
<divstyle={`position: ${style.position}; top: ${style.top}; left: ${style.left}; right: ${style.right}; height: ${style.height};`}
>
{items[index]}
</div>
{/snippet}
</VirtualList>

React Native

import{View,Text}from"react-native";import{VirtualList}from"@scrolloop/react-native";functionApp(){constitems=Array.from({length: 1000},(_,i)=>`Item #${i}`);return(<VirtualListcount={items.length}itemSize={50}height={400}renderItem={(index,style)=>(<Viewkey={index}style={style}><Text>{items[index]}</Text></View>)}/>);}

Packages

• @scrolloop/core: Platform-agnostic virtual scrolling logic
• @scrolloop/shared: Shared infinite loading state and utilities
• @scrolloop/react: React implementation
• @scrolloop/preact: Preact implementation
• @scrolloop/vue: Vue 3 implementation
• @scrolloop/svelte: Svelte 5 implementation
• @scrolloop/react-native: React Native implementation

License

MIT