All Projects → samouss → react-infinite-scroll-list

samouss / react-infinite-scroll-list

Licence: MIT License
Manage infinite list with the IntersectionObserver API

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to react-infinite-scroll-list

Svelte Infinite Scroll
Infinite Scroll Component to Svelte
Stars: ✭ 102 (+410%)
Mutual labels:  infinite-scroll, scroll, infinite
Infinite Ajax Scroll
Turn your existing pagination into infinite scrolling pages with ease
Stars: ✭ 804 (+3920%)
Mutual labels:  infinite-scroll, scroll, infinite
Infinitescroll
Infinite Scroll (Endless Scrolling) for RecyclerView in Android
Stars: ✭ 183 (+815%)
Mutual labels:  infinite-scroll, scroll, infinite
vuejs-loadmore
A pull-down refresh and pull-up loadmore scroll component for Vue.js. Vue上拉加载下拉刷新组件
Stars: ✭ 62 (+210%)
Mutual labels:  infinite-scroll, scroll, infinite
ng-mat-select-infinite-scroll
Infinite Scroll directive for angular material select component
Stars: ✭ 39 (+95%)
Mutual labels:  infinite-scroll, scroll, infinite
React Infinite Calendar
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
Stars: ✭ 3,828 (+19040%)
Mutual labels:  infinite-scroll, infinite
Vue Mugen Scroll
Infinite scroll component for Vue.js 2
Stars: ✭ 532 (+2560%)
Mutual labels:  infinite-scroll, scroll
infinite view pager
📜Infinite View Pager widget for Flutter
Stars: ✭ 26 (+30%)
Mutual labels:  infinite-scroll, infinite-lists
Ngx Infinite Scroll
Infinite Scroll Directive for Angular
Stars: ✭ 1,024 (+5020%)
Mutual labels:  infinite-scroll, scroll
Vue List Scroller
Simple and easy to use Vue.js component for efficient rendering large lists
Stars: ✭ 65 (+225%)
Mutual labels:  infinite-scroll, scroll
scrollbox
A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point.
Stars: ✭ 15 (-25%)
Mutual labels:  infinite-scroll, scroll
Loopingviewpager
A ViewPager and PagerAdapter combination that support auto scroll, infinite loop and page indicators.
Stars: ✭ 310 (+1450%)
Mutual labels:  infinite-scroll, infinite
react-bidirectional-infinite-scroll
Bidirectional infinite scroll written using react
Stars: ✭ 31 (+55%)
Mutual labels:  infinite-scroll, infinite-lists
Rsdayflow
iOS 7+ Calendar (Date Picker) with Infinite Scrolling.
Stars: ✭ 843 (+4115%)
Mutual labels:  infinite-scroll, scroll
Ngx Ui Scroll
Infinite/virtual scroll for Angular
Stars: ✭ 145 (+625%)
Mutual labels:  infinite-scroll, scroll
angular2-infinite-scroll
Infinite Scroll Directive For Angular (version 2 up to 2.3.1)
Stars: ✭ 16 (-20%)
Mutual labels:  infinite-scroll, scroll
Endless
🛣 A lightweight endless pageControl based on CAShapeLayers and UICollectionView
Stars: ✭ 19 (-5%)
Mutual labels:  infinite-scroll, infinite
vue-next-level-scroll
Bring your scroll game to the next level!
Stars: ✭ 49 (+145%)
Mutual labels:  scroll
infinite
🤪 The database that can store the Internet
Stars: ✭ 25 (+25%)
Mutual labels:  infinite
react-native-paginated-listview
A simple paginated react-native ListView with a few customization options
Stars: ✭ 14 (-30%)
Mutual labels:  infinite-scroll

React Infinite List

npm version Build Status

Installation

yarn add react-infinite-scroll-list

Note: This library is based on the IntersectionObserver API, it's not yet widely supported. Check the compatibility table and add a Polyfill to your needs!

Check out the example on Storybook

Usage

Import the module in your application:

// From ES6
import InfiniteList from 'react-infinite-scroll-list';

// From CJS
const InfiniteList = require('react-infinite-scroll-list').default;

// From global
const InfiniteList = ReactInfiniteScrollList.default;

Then use it juste like that:

<InfiniteList
  root="container|viewport"
  isLoading={true | false}
  isEndReached={true | false}
  onReachThreshold={() => {
    console.log('Load more content');
  }}
  containerClassName="custom-container-class-name"
  sentinelClassName="custom-sentinel-class-name"
  containerTagName="div"
  sentinelTagName="div"
  threshold={0}
>
  {items.map(item => <div key={item.id}>{item.message}</div>)}
</InfiniteList>

Run Storybook

yarn start-storybook

Build Storybook

yarn build-storybook

Run the test

yarn test
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].