@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

Basic Example

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 (
    <ul
      style={{
        border: '1px solid #333',
        height: 400,
        width: 200,
        overflowY: 'auto'
      }}
    >
      {list.map((item, index) => (
        <li key={index} style={{ height: 30, borderBottom: '1px solid #333' }}>
          item-{index + 1}
        </li>
      ))}
      <Scrollload loadMoreFun={loadMoreFun} option={option} />
    </ul>
  );
};
const App = () => <Example />;
render(<App />, document.getElementById('root'));

Props

loadMoreFun(required) | type: () => boolean | Promise | defaultValue： -

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

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

option(optional) | type: {root:HTMLElement,rootMargin:string,threshold: number} | defaultValue： {}

一个可以用来配置 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

loadingContent(optional) | type: ReactNode | defaultValue： 'loading...'

被监听元素的内容

The contents of the element being listened on