@xiaoluxiaolu/react-scrollload

一个 react 的 function 组件，使用 IntersectionObserver API 实现了滚动加载功能。

_A React Function component that implements scrolling loading using the IntersectionObserver API._

IntersectionObserver API 目前在标准中的状态为 wd(W3C 手稿)，在www.caniuse.com上查询，该 API 已得到92.19% + 1.6% = 93.79%的全球浏览器支持。

_The IntersectionObserver API is currently in the standard status of WD (W3C Manuscript)，The API is supported by 92.19% + 1.6% = 93.79% of the world's browsers at www.caniuse.com._

如果您在使用中遇到兼容问题，可以安装intersection-observer这一 IntersectionObserver polyfill，进行兼容处理。

_If you run into compatibility problems, you can install the intersectionObserver polyfill, intersection-observer, for compatibility._

Installation

``
npm install --save @xiaoluxiaolu/react-scrollload
`

Usage

$3

---

`javascript
import React, { useState, useMemo, useCallback } from 'react';
import { render } from 'react-dom';
import Scrollload from '@xiaoluxiaolu/react-scrollload';

const Example = () => {
const [list, setList] = useState([]);

const loadMoreFun = useCallback(() => {
setList((oldList) => oldList.concat(Array.from({ length: 10 })));
// if you wan'to stop loading more, return false in this function
// if (some condition) {
// return false
// }
}, []);

const option = useMemo(() => ({}), []);

return (
style={{
border: '1px solid #333',
height: 400,
width: 200,
overflowY: 'auto'
}}
>
{list.map((item, index) => (



item-{index + 1}



))}


);
};
const App = () => ;
render(, document.getElementById('root'));
``

Props

$3

当加载触发时，执行的回调。

_The callback that is executed when the load is triggered._

当需要停止继续加载数据时，在这个 function 中 return false 即可，支持返回一个 Promise 对象，Promise 对象 reject 时或 resolve 时且 value 为 false 则停止继续加载数据。

_Loading will be stopped with false or a resolved Promise with value false or a rejected Promise returned_

请使用 useCallback 包裹，以免触发 re-render

_Please use the useCallback to avoid triggering re-render_

$3

一个可以用来配置 observer 实例的对象,参考：MDN

_An optional object which customizes the observe,reference:MDN_

如果传入，请使用 useMemo 包裹，以免触发 re-render

_If passed in, use the useMemo to avoid triggering re-render_

$3

被监听元素的内容

_The contents of the element being listened on_