A Infinite Loading Component for React (16.8+)!
npm install yi-infinite-loading-react
npm install yi-infinite-loading-react
Props
| props | description | type | default |
| --------------- | ---------- | ---------- | ---------- |
| loadMore | callback | function | function |
| loading | is loading | booblean | false |
| finished | is loaded | boolean | false |
| offset | distance from bottom | string ｜ number | 0 |
| hideLoading | Whether to hide the default loading status | boolean | false |
Usage
tsx
import React, { Fragment, useCallback, useState } from 'react'
import YiInfiniteLoading from 'yi-infinite-loading-react'
function App() {
const [loading, setLoading] = useState(false)
const [finished, setFinished] = useState(false)
const [list, setList] = useState([]) const loadMore = useCallback(() => {
if (loading) {
return
}
setLoading(true)
setTimeout(() => {
const len = list.length
for (let i = 1; i <= 10; i++) {
list.push(len + i)
}
setLoading(false)
if (list.length > 100) {
setFinished(true)
}
}, 1000)
},[loading, finished])
const clear = () => {
setList([])
setFinished(false)
}
return (
{list.map(item => {
return (
{ item }
)
})}
finished={finished}
offset={100}
hideLoading={true}
loadMore={loadMore}
>
{loading && loading... }
{ finished && end... }
{
loading ? null : (
)
}
);
}
export default App;
``