scrolloop

The modern scrolling component for React and React Native

Install

React

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

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/react: React implementation
• @scrolloop/react-native: React Native implementation

License

MIT