scrolloop

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

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";

function App() {
  const items = Array.from({ length: 1000 }, (_, i) => `Item #${i}`);

  return (
    <VirtualList
      count={items.length}
      itemSize={50}
      height={400}
      renderItem={(index, style) => (
        <div key={index} style={style}>
          {items[index]}
        </div>
      )}
    />
  );
}

React Native

import { View, Text } from "react-native";
import { VirtualList } from "@scrolloop/react-native";

function App() {
  const items = Array.from({ length: 1000 }, (_, i) => `Item #${i}`);

  return (
    <VirtualList
      count={items.length}
      itemSize={50}
      renderItem={(index, style) => (
        <View key={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