Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/algesthesiah/react-observer-infinite-scroll
An infinite scroll component for React
https://github.com/algesthesiah/react-observer-infinite-scroll
Last synced: about 1 month ago
JSON representation
An infinite scroll component for React
- Host: GitHub
- URL: https://github.com/algesthesiah/react-observer-infinite-scroll
- Owner: algesthesiah
- License: mit
- Created: 2021-07-16T03:30:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-09-07T03:42:54.000Z (over 3 years ago)
- Last Synced: 2024-11-09T08:19:38.075Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://algesthesiah.github.io/react-observer-infinite-scroll
- Size: 3.87 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-observer-infinite-scroll
一个基于 `IntersectionObserver` 的无限滚动 `react-hook` 组件，支持正向滚动、逆向滚动（类似微信聊天回滚加载历史数据）、滑到底部
# install
```bash
npm install --save react-observer-infinite-scroll
// in code ES6
import InfiniteScroll from 'react-observer-infinite-scroll';
```
# demos
## ScrolleableTop
类似聊天查看历史记录倒序无限加载
```jsx
import React, { useRef, useState, useCallback } from 'react';
import InfiniteScroll, { InfiniteScrollOutRef } from 'react-observer-infinite-scroll';
const ScrolleableTop = () => {
const targetRef = useRef(null);
const targetWrapRef = useRef(null);
const [list, setList] = useState(Array.from({ length: 20 }));
const [loading, setLoading] = useState(false);
const next = useCallback(() => {
setLoading(true);
setTimeout(() => {
setList(pre => pre.concat(Array.from({ length: 20 })));
setLoading(false);
}, 2000);
}, []);
const toBottom = useCallback(() => {
targetRef?.current?.scrollToBottom && targetRef?.current?.scrollToBottom();
}, [targetRef]);
return (
TO BOTTOM
Loading...}>
{list.map((_, i) => (
#{i + 1} row
))}
);
};
export default ScrolleableTop;
```
## WindowInfiniteScrollComponent
常用的基于 全局 `Windows` 的无限下拉
``` jsx
import { useState } from 'react';
import InfiniteScroll from 'react-observer-infinite-scroll';
const WindowInfiniteScrollComponent = () => {
const [data, setData] = useState(Array.from({ length: 20 }));
const [loading, setLoading] = useState(false);
const next = () => {
setLoading(true);
setTimeout(() => {
setData(pre => pre.concat(Array.from({ length: 20 })));
setLoading(false);
}, 2000);
};
return (
<>
Loading...}
dataLength={data.length}>
{data.map((_, i) => (
#{i + 1} row
))}
>
);
};
export default WindowInfiniteScrollComponent;
```
## ScrolleableBottom
常用的基于 容器 `Element` 的无限下拉
``` jsx
import React, { useRef, useState, useCallback } from 'react';
import InfiniteScroll, { InfiniteScrollOutRef } from 'react-observer-infinite-scroll';
const ScrolleableBottom = () => {
const targetRef = useRef(null);
const targetWrapRef = useRef(null);
const [list, setList] = useState(Array.from({ length: 20 }));
const [loading, setLoading] = useState(false);
const next = useCallback(() => {
setLoading(true);
setTimeout(() => {
setList(pre => pre.concat(Array.from({ length: 20 })));
setLoading(false);
}, 2000);
}, []);
const toBottom = useCallback(() => {
targetRef?.current?.scrollToBottom && targetRef?.current?.scrollToBottom();
}, [targetRef]);
return (
TO BOTTOM
Loading...}>
{list.map((_, i) => (
#{i + 1} row
))}
);
};
export default ScrolleableBottom;
```
# props
| name | type | description |
| ---------------------- | ----------- | ------------------------- |
| **next** | function | 触发滚动的回调函数 |
| **loading** | boolean | 控制内部 loading 显示状态 |
| **hasMore** | boolean | 是否可以加载更多 |
| **children** | node (list) | 滚动列表子级元素 |
| **loader** | node | 加载动画元素 |
| **style** | object | 容器样式表 |
| **intersectionOption** | object | IntersectionObserver 参数 |
| **inverse** | boolean | 是否倒序 |
| **dataLength** | number | 滚动列表数据数组的 length |