react-infinite-list-observer

Demo

Playground here

install

npm install react-infinite-list-observer

or

yarn add react-infinite-list-observer

usage

const listRef = useRef<ListHandler>(null);

const onSomething = () => {
         if (listRef.current) {
            listRef.current.resetPage();
            listRef.current.scrollToTop();
          }
]

 <List
        ref={listRef}
        hasMore={hasMore}
        list={items}
        height={400} // optional
        onFetchMore={fetchMore}
        renderItem={(item) => {
          return (
           <div key={item.id}>{item.name}</div>
          );
        }}
      />

#props

| Prop | description | | ----------- | ------------------------------------------------------------------- | | list | T | | renderItem | method returns JSX | | hasMore | boolean | | onFetchMore | method used to fetch more data | | currentPage | optional - number | | height | optional - number | | className | used for styling | | ref | optional: attach ref - allows you to reset the page / scroll to top |