react-simple-infinite-loading v1이 나왔습니다 🎉

react-window은 훌륭한 도구이지만 무한 로딩 목록을 구현할 때 다소 장황할 수 있습니다. 다음은 example 입니다. react-simple-infinite-loading은 코드 복잡성을 처리하는 구성 요소입니다. Brian Vaughn의 세 라이브러리를 감싸는 래퍼입니다.

react-window은 큰 목록을 효율적으로 표시하도록 만들어졌습니다. 보이는 요소와 재사용 노드에 대한 구성 요소만 생성합니다.

react-window-infinite-loader은 사용자가 목록을 아래로 스크롤할 때 적시에 요소를 로드하는 HOC입니다

.

react-virtualized-auto-sizer은 상위 컨테이너에서 사용 가능한 공간에 맞도록 목록을 표시하는 데 도움이 됩니다.

v1이 나왔습니다!

구성 요소에는 이제 완전한 기능 세트가 있습니다.

사용자가 아래로 스크롤할 때 항목 로드

내부 메서드를 사용하여 프로그래밍 방식으로 스크롤하거나 캐시된 항목을 재설정합니다

.

기본 스크롤 막대 스타일 재정의

용법

최소한의 예를 살펴보겠습니다.

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        hasMoreItems={hasMore}
        itemHeight={40}
        loadMoreItems={fetchMore}
      >
        {items.map(item => <div key={item}>{item}</div>)}
      </InfiniteLoading>
    </div>
  )
}

react-simple-infinite-loading에는 네 가지 속성이 필요합니다.

children: JSX 노드의 배열이어야 합니다.

hasMoreItems: 이 속성은 사용자가 목록의 끝에 도달했는지 여부를 결정하여 더 이상 스크롤하지 못하게 합니다.

itemHeight: 렌더링된 요소 수를 최적화하고 더 많은 행을 로드해야 하는지 결정하는 것은 필수입니다.

loadMoreItems: 더 많은 행을 로드해야 할 때 구성 요소가 호출하는 콜백 함수입니다.

컨텍스트에 따라 다르므로 일부러 함수 구현을 숨깁니다loadMoreItems. 가져오기 호출, GraphQL 쿼리, 데이터베이스 액세스 등 원하는 모든 것이 될 수 있습니다. Star Wars API 에서 documentation 을 사용한 전체 예제를 볼 수 있습니다.

기본 스크롤바 스타일 재정의

react-simple-infinite-loading react-custom-scrollbars을 사용하여 기본 스크롤 막대 스타일을 재정의합니다. 활성화하려면 소품customScrollbar을 추가해야 합니다.

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        hasMoreItems={hasMore}
        itemHeight={40}
        loadMoreItems={fetchMore}
        customScrollbar
      >
        {items.map(item => <div key={item}>{item}</div>)}
      </InfiniteLoading>
    </div>
  )
}

더 많은 행을 로드하는 동안 자리 표시자 표시

행이 로드되는 동안 표시될 placeholder 속성을 설정할 수 있습니다. 기본적으로 placeholder 노드를 콘텐츠로 사용하여 목록 끝에 추가 행을 추가합니다.

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        hasMoreItems={hasMore}
        itemHeight={40}
        loadMoreItems={fetchMore}
        placeholder={<div>Loading...</div>}
      >
        {items.map(item => <div key={item}>{item}</div>)}
      </InfiniteLoading>
    </div>
  )
}

로드할 행별로 자리 표시자를 갖고 싶다면 선택적 속성itemsCount을 제공해야 합니다(행 수를 미리 알고 있는 경우에만 작동함). loadMoreItems 콜백을 보다 세밀하게 구현해야 합니다. 이 함수는 로드해야 하는 행의 시작 인덱스와 종료 인덱스를 매개변수로 사용합니다.

내부 메서드 호출

react-window 및 react-window-infinite-loader는 프로그래밍 방식으로 목록을 조작하는 몇 가지 방법을 제공합니다. 심판을 통해 사용할 수 있습니다.

세 가지 방법에 액세스할 수 있습니다.

scrollTo(scrollOffset: number): void - 지정된 오프셋으로 스크롤합니다.

scrollToItem(index: number, align: string = "auto"): void - 지정된 항목으로 스크롤합니다.

resetloadMoreItemsCache(): void - 이전에 로드된 항목을 캐시에서 지웁니다.

다음은 scrollTo 메서드의 예입니다.

function Example({ items, fetchMore, hasMore }) {
  const ref = React.useRef()
  const scrollToTop = () => {
    if (ref.current) {
      ref.current.scrollTo(0)
    }
  }

  return (
    <>
      <button onClick={scrollToTop}>Scroll to top</button>
      <div style={{ width: 300, height: 300 }}>
        <InfiniteLoading
          hasMoreItems={hasMore}
          itemHeight={40}
          loadMoreItems={fetchMore}
          ref={ref}
        >
          {items.map(item => <div key={item}>{item}</div>)}
        </InfiniteLoading>
      </div>
    </>
  )
}

관심있으신 분들은 부담없이 도전해보세요!

저장소: https://github.com/frinyvonnick/react-simple-infinite-loading

피드백과 기여에 감사드립니다 🙏 질문이 있으시면 저에게 트윗을 보내주세요!

도움이 되길 바랍니다!