Skip to main content

InfinityContent()

무한 스크롤을 구현할 수 있는 컴포넌트입니다. 자식에 랜더링하고 싶은 컴포넌트(리스트 컴포넌트)를 받아 랜더링합니다. 유저의 화면이 스크롤 될때 observer 가 보고 있는 요소가 화면에 보이면 onFetchMore 함수를 호출합니다.

Signature​

InfinityContent: ({
  children,
  hasMore,
  isFetching,
  onFetchMore,
  observerOption,
  styles,
  spinner
}: InfinityContentProps) => react_jsx_runtime.JSX.Element

Parameters​

Parameter

Type

Description

{ children, hasMore, isFetching, onFetchMore, observerOption, styles, spinner}

InfinityContentProps

Returns​

react_jsx_runtime.JSX.Element

Example​


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

 return (
  <InfinityContent
     hasMore={hasNextPage}
     isFetching={isFetchingNextPage}
     onFetchMore={fetchNextPage}
  >
   <PostList data={data} />
 </InfinityContent>
 )
}