InfiniteScroll

<List
  initial={[
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
  ]}
>
  {({ list, first, last, push }) => (
    <div style={{ height: 200, overflowY: 'auto' }}>
      <InfiniteScroll
        ref={node => {
          console.log('scrooll ref', node)
        }}
        pageStart={1}
        loadMore={() =>
          setTimeout(() => {
            console.log('loading more')
            push('item', 'item', 'item', 'item', 'item'), 1000
          })
        }
        hasMore={true}
        loader={<div key={0}>Loading ...</div>}
        useWindow={false}
        threshold={25}
      >
        {list.map((item, index) => {
          return <div key={index}>Item {index + 1}</div>
        })}
      </InfiniteScroll>
    </div>
  )}
</List>

<List
  initial={[
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
    'item',
  ]}
>
  {({ list, first, last, push }) => (
    <div style={{ height: 200, overflowY: 'auto' }}>
      <table>
        <InfiniteScroll
          as="tbody"
          pageStart={0}
          loadMore={() =>
            new Promise(resolve => {
              setTimeout(() => {
                push('item', 'item', 'item', 'item', 'item')
                resolve()
              }, 1000)
            })
          }
          hasMore={true}
          loader={<div key={0}>Loading ...</div>}
          initialLoad={false}
          useWindow={false}
          // tell the component how to find the parent to attach the listeners to
          // this might be necessary when using unusual elements, like <table>
          getScrollParent={scrollElement =>
            scrollElement.offsetParent.parentNode
          }
        >
          {list.map((item, index) => {
            return (
              <tr key={index}>
                <td>Item {index}</td>
              </tr>
            )
          })}
        </InfiniteScroll>
      </table>
    </div>
  )}
</List>