LoadMore

Layout

스크롤 끝에서 다음 목록을 이어 불러오는 무한 스크롤.

Usage

긴 목록 하단이 보일 때 다음 페이지를 자동으로 불러오는 무한 스크롤에 사용한다.

import

import { LoadMore } from '@mildang/design-system/LoadMore';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

LoadMore Props

Prop

Type

Default

children

필수

(props: LoadMoreRenderProps) => ReactNode

지정 안 함

hasNextPage

필수

boolean

지정 안 함

필수

boolean

지정 안 함

onLoadMore

필수

() => void

지정 안 함

enabled

boolean

지정 안 함

rootMargin

string

지정 안 함

threshold

number

지정 안 함

로딩과 마지막 페이지

loading이 true이면 다음 페이지를 불러오는 상태를 표시하고, hasNextPage가 false이면 sentinel을 더 이상 감지하지 않아 목록의 끝을 나타냅니다.

로딩과 마지막 페이지

다음 페이지 로딩과 목록 끝 상태를 표시합니다.

코드

Open in Playground

import { LoadMore } from '@mildang/design-system/LoadMore'; import { VStack } from '@mildang/styled-system/jsx';
export default function LoadMoreLoadingEndExample() { return <LoadMore hasNextPage={false} loading={false} onLoadMore={() => undefined}>{({ rootRef, sentinelRef }) => <VStack ref={rootRef} alignItems="stretch"><span>불러온 학습 기록</span><span ref={sentinelRef} aria-label="목록의 마지막" /></VStack>}</LoadMore>; }

예제

기본 사용

sentinelRef 가 화면에 들어오면 onLoadMore 를 부르는 무한 스크롤 감지기 — 더보기 버튼 없이 다음 페이지를 잇습니다.

코드

Open in Playground

'use client';

import { LoadMore } from '@mildang/design-system/LoadMore';
import { VStack } from '@mildang/styled-system/jsx';

export default function LoadMoreExample() {
  return (
    <LoadMore hasNextPage loading={false} onLoadMore={() => undefined}>
      {({ rootRef, sentinelRef }) => (
        <VStack ref={rootRef} alignItems="stretch" gap="8">
          <span>불러온 학습 기록</span>
          <span ref={sentinelRef} aria-label="다음 페이지 감지 지점" />
        </VStack>
      )}
    </LoadMore>
  );
}