scrolloop

React 스크롤 컴포넌트 라이브러리

Just a scrolling library for React

Install

npm install scrolloop
yarn add scrolloop
pnpm add scrolloop

Examples

VirtualList

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

export default function App() {
  return (
    <VirtualList
      count={items.length}
      itemSize={40}
      renderItem={(index, style) => (
        <div style={style} key={index}>
          {items[index]}
        </div>
      )}
    />
  );
}

import { View, Text } from "react-native";

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

export default function App() {
  return (
    <VirtualList
      count={items.length}
      itemSize={40}
      renderItem={(index, style) => (
        <View style={style} key={index}>
          <Text>{items[index]}</Text>
        </View>
      )}
    />
  );
}

InfiniteList

interface User {
  id: string;
  name: string;
  email: string;
}

export default function UserList() {
  return (
    <InfiniteList<User>
      fetchPage={fetchFunction()}
      pageSize={20}
      itemSize={60}
      height={800}
      renderItem={(user, index, style) => (
        <div
          style={{
            ...style,
            padding: "8px 16px",
            borderBottom: "1px solid #eee",
          }}
        >
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      )}
      renderLoading={() => <div>로딩 중...</div>}
      renderError={(error, retry) => (
        <div>
          <p>{error.message}</p>
          <button onClick={retry}>재시도</button>
        </div>
      )}
      renderEmpty={() => <div>데이터가 없습니다.</div>}
    />
  );
}

import { View, Text, TouchableOpacity } from "react-native";

interface User {
  id: string;
  name: string;
  email: string;
}

export default function UserList() {
  return (
    <InfiniteList<User>
      fetchPage={fetchFunction()}
      pageSize={20}
      itemSize={60}
      height={800}
      renderItem={(user, index, style) => (
        <View
          style={{
            ...style,
            padding: 8,
            borderBottomWidth: 1,
            borderBottomColor: "#eee",
          }}
        >
          <Text style={{ fontSize: 16, fontWeight: "bold" }}>{user.name}</Text>
          <Text style={{ color: "#666" }}>{user.email}</Text>
        </View>
      )}
      renderLoading={() => <Text>로딩 중...</Text>}
      renderError={(error, retry) => (
        <View>
          <Text>{error.message}</Text>
          <TouchableOpacity onPress={retry}>
            <Text>재시도</Text>
          </TouchableOpacity>
        </View>
      )}
      renderEmpty={() => <Text>데이터가 없습니다.</Text>}
    />
  );
}

license

MIT