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>
      )}
    />
  );
}

Preact

import { VirtualList } from "@scrolloop/preact";

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

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

<script lang="ts">
  import { VirtualList } from "@scrolloop/svelte";

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

<VirtualList count={items.length} itemSize={50} height={400}>
  {#snippet children(index, style)}
    <div
      style={`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";

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

  return (
    <VirtualList
      count={items.length}
      itemSize={50}
      height={400}
      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