Skip to main content

InfinityList()

무한 스크롤을 구현할 수 있는 컴포넌트입니다. data 와 renderItem 을 직접 받아 랜더링합니다.

스크롤이 끝에 도달하여 observer 가 보고 있는 요소가 화면에 보이면 onFetchMore 함수를 호출합니다.

Signature​

InfinityList: <T>({
  data,
  renderItem,
  hasMore,
  isFetching,
  onFetchMore,
  observerOption,
  empty,
  spinner,
  styles
}: InfinityListProps<T>) => string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined

Parameters​

Parameter

Type

Description

{ data, renderItem, hasMore, isFetching, onFetchMore, observerOption, empty, spinner, styles}

InfinityListProps<T>

Returns​

string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined

Example​


const ExampleComponent = () => {
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = usePostsInfiniteQuery();

return (
 <InfinityList
   data={data}
   hasMore={hasNextPage}
   isFetching={isFetchingNextPage}
   onFetchMore={fetchNextPage}
   renderItem={(item, index) => <PostItem key={index} item={item} />}
   />
 )
}