react-infinite-scroll-component vs react-infinite-scroller vs react-window-infinite-loader
无限滚动组件
react-infinite-scroll-componentreact-infinite-scrollerreact-window-infinite-loader类似的npm包:

无限滚动组件

无限滚动组件用于在用户滚动时动态加载更多内容,提供流畅的用户体验。这些库帮助开发者实现无缝的内容加载,避免页面加载时间过长,从而提升用户体验。它们各自具有不同的特性和适用场景,适合不同的开发需求。

npm下载趋势

3 年

GitHub Stars 排名

统计详情

npm包名称
下载量
Stars
大小
Issues
发布时间
License
react-infinite-scroll-component03,064169 kB2013 个月前MIT
react-infinite-scroller03,30930.3 kB98-MIT
react-window-infinite-loader095223 kB02 个月前MIT

功能对比: react-infinite-scroll-component vs react-infinite-scroller vs react-window-infinite-loader

易用性

  • react-infinite-scroll-component:

    该库提供了简单的API,易于集成和使用。只需在组件中添加相应的属性即可实现无限滚动,适合快速开发和原型制作。

  • react-infinite-scroller:

    该库的API设计灵活,允许开发者根据需要自定义加载逻辑和事件处理,适合需要更复杂交互的项目。

  • react-window-infinite-loader:

    该库专注于与虚拟化结合使用,虽然集成稍微复杂,但提供了更高的性能和效率,适合处理大规模数据的应用。

性能优化

  • react-infinite-scroll-component:

    该库在性能上表现良好,适合小型到中型数据集的无限滚动,能够有效地处理滚动事件。

  • react-infinite-scroller:

    该库支持多种加载状态的处理,能够在滚动时动态加载数据,适合需要频繁更新内容的场景。

  • react-window-infinite-loader:

    该库通过虚拟化技术优化性能,只渲染可视区域的内容,适合处理大量数据时保持流畅体验。

自定义能力

  • react-infinite-scroll-component:

    支持自定义加载指示器和滚动事件处理,允许开发者根据需求调整用户体验。

  • react-infinite-scroller:

    提供更多的配置选项,允许开发者自定义加载逻辑和状态,适合复杂的应用场景。

  • react-window-infinite-loader:

    虽然自定义能力较强,但需要与虚拟化列表结合使用,适合对性能和用户体验有高要求的项目。

社区支持

  • react-infinite-scroll-component:

    该库有活跃的社区支持,文档清晰,适合初学者和快速开发。

  • react-infinite-scroller:

    社区支持良好,提供了丰富的示例和文档,适合需要灵活性的开发者。

  • react-window-infinite-loader:

    社区相对较小,但在性能优化方面有独特的优势,适合对性能有严格要求的项目。

学习曲线

  • react-infinite-scroll-component:

    学习曲线平缓,易于上手,适合新手和快速开发。

  • react-infinite-scroller:

    学习曲线稍陡,需要理解更多的配置选项,适合有一定经验的开发者。

  • react-window-infinite-loader:

    学习曲线较陡,需要理解虚拟化的概念,适合对性能有深入理解的开发者。

如何选择: react-infinite-scroll-component vs react-infinite-scroller vs react-window-infinite-loader

  • react-infinite-scroll-component:

    选择此库如果你需要一个简单易用的无限滚动解决方案,支持自定义加载指示器和滚动事件处理,并且希望在功能上保持轻量级。

  • react-infinite-scroller:

    选择此库如果你需要更灵活的配置选项,支持多种加载方式,并且希望在滚动时能够处理不同的加载状态。

  • react-window-infinite-loader:

    选择此库如果你需要与虚拟化列表结合使用,以优化性能,尤其是在处理大量数据时。它允许你只渲染可视区域的内容,减少DOM节点的数量。

react-infinite-scroll-component的README

react-infinite-scroll-component npm npm

All Contributors

A component to make all your infinite scrolling woes go away with just 4.15 kB! Pull Down to Refresh feature added. An infinite-scroll that actually works and super-simple to integrate!

Install

  npm install --save react-infinite-scroll-component

  or

  yarn add react-infinite-scroll-component

  // in code ES6
  import InfiniteScroll from 'react-infinite-scroll-component';
  // or commonjs
  var InfiniteScroll = require('react-infinite-scroll-component');

Using

<InfiniteScroll
  dataLength={items.length} //This is important field to render the next data
  next={fetchData}
  hasMore={true}
  loader={<h4>Loading...</h4>}
  endMessage={
    <p style={{ textAlign: 'center' }}>
      <b>Yay! You have seen it all</b>
    </p>
  }
  // below props only if you need pull down functionality
  refreshFunction={this.refresh}
  pullDownToRefresh
  pullDownToRefreshThreshold={50}
  pullDownToRefreshContent={
    <h3 style={{ textAlign: 'center' }}>&#8595; Pull down to refresh</h3>
  }
  releaseToRefreshContent={
    <h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>
  }
>
  {items}
</InfiniteScroll>

Using scroll on top

<div
  id="scrollableDiv"
  style={{
    height: 300,
    overflow: 'auto',
    display: 'flex',
    flexDirection: 'column-reverse',
  }}
>
  {/*Put the scroll bar always on the bottom*/}
  <InfiniteScroll
    dataLength={this.state.items.length}
    next={this.fetchMoreData}
    style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.
    inverse={true} //
    hasMore={true}
    loader={<h4>Loading...</h4>}
    scrollableTarget="scrollableDiv"
  >
    {this.state.items.map((_, index) => (
      <div style={style} key={index}>
        div - #{index}
      </div>
    ))}
  </InfiniteScroll>
</div>

The InfiniteScroll component can be used in three ways.

  • Specify a value for the height prop if you want your scrollable content to have a specific height, providing scrollbars for scrolling your content and fetching more data.
  • If your scrollable content is being rendered within a parent element that is already providing overflow scrollbars, you can set the scrollableTarget prop to reference the DOM element and use it's scrollbars for fetching more data.
  • Without setting either the height or scrollableTarget props, the scroll will happen at document.body like Facebook's timeline scroll.

docs version wise

3.0.2

live examples

  • infinite scroll (never ending) example using react (body/window scroll)
    • Edit yk7637p62z
  • infinte scroll till 500 elements (body/window scroll)
    • Edit 439v8rmqm0
  • infinite scroll in an element (div of height 400px)
    • Edit w3w89k7x8
  • infinite scroll with scrollableTarget (a parent element which is scrollable)
    • Edit r7rp40n0zm

props

nametypedescription
nextfunctiona function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. The data is passed as children to the InfiniteScroll component and the data should contain previous items too. e.g. Initial data = [1, 2, 3] and then next load of data should be [1, 2, 3, 4, 5, 6].
hasMorebooleanit tells the InfiniteScroll component on whether to call next function on reaching the bottom and shows an endMessage to the user
childrennode (list)the data items which you need to scroll.
dataLengthnumberset the length of the data.This will unlock the subsequent calls to next.
loadernodeyou can send a loader component to show while the component waits for the next load of data. e.g. <h3>Loading...</h3> or any fancy loader element
scrollThresholdnumber | stringA threshold value defining when InfiniteScroll will call next. Default value is 0.8. It means the next will be called when user comes below 80% of the total height. If you pass threshold in pixels (scrollThreshold="200px"), next will be called once you scroll at least (100% - scrollThreshold) pixels down.
onScrollfunctiona function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect.
endMessagenodethis message is shown to the user when he has seen all the records which means he's at the bottom and hasMore is false
classNamestringadd any custom class you want
styleobjectany style which you want to override
heightnumberoptional, give only if you want to have a fixed height scrolling content
scrollableTargetnode or stringoptional, reference to a (parent) DOM element that is already providing overflow scrollbars to the InfiniteScroll component. You should provide the id of the DOM node preferably.
hasChildrenboolchildren is by default assumed to be of type array and it's length is used to determine if loader needs to be shown or not, if your children is not an array, specify this prop to tell if your items are 0 or more.
pullDownToRefreshboolto enable Pull Down to Refresh feature
pullDownToRefreshContentnodeany JSX that you want to show the user, default={<h3>Pull down to refresh</h3>}
releaseToRefreshContentnodeany JSX that you want to show the user, default={<h3>Release to refresh</h3>}
pullDownToRefreshThresholdnumberminimum distance the user needs to pull down to trigger the refresh, default=100px , a lower value may be needed to trigger the refresh depending your users browser.
refreshFunctionfunctionthis function will be called, it should return the fresh data that you want to show the user
initialScrollYnumberset a scroll y position for the component to render with.
inverseboolset infinite scroll on top

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Ankeet Maini

💬 📖 💻 👀 🚧

Darsh Shah

🚇

This project follows the all-contributors specification. Contributions of any kind are welcome!

LICENSE

MIT