React-Roll
infinite scroller, record scroll position, like twitter's timeline
🇦🇺English
|🇨🇳 简体中文
Features
- Optimization big list
- infinite scroll loading
- Record list scroll state
- Support different height list items
DEMO
different height items
select city of china
infinite scroll to load data
record scroll status
Install
npm install react-roll
Usage
* Quick use!
import {Provider, Scroller} from 'react-scoll'
const App () => (
<Provider>
<Scroller element={ListItem}/>
</Provider>
)
* How to pass data to each list item?
async function fetch(page, push) {
const list = await getData({page}) // list: [{title}]
push(list)
}
const ListItem = ({title}) => <div>{title}</div>
// As long as there is onFetch prop, that you can infinite load list data
<Provider>
<Scroller element={ListItem} onFetch={fetch} />
</Provider>
* Make scrolling more precise
// If the list items have different heights, set an average height!
// And If the list items have same heights, set an average height too!
<Provider>
<Scroller averageHeight={200} element={ListItem} onFetch={fetch} />
</Provider>
* No need to scroll infinitely, just optimize the list
<Provider source={bigList}>
<Scroller averageHeight={50} element={ListItem}>
</Provider>
* Insert elements other than lists
<Provider source={bigList}>
<Scroller
{/* other elements */}
upperRender={() => <Header />}
averageHeight={50}
element={ListItem}>
</Provider>
API
Scroller
prop(extends DIV) |
description |
type |
default |
element |
list item component |
React.Element |
|
averageHeight |
average height of list item |
Number |
350 |
length |
The actual number to render, If not set, it will be calculated by the algorithm |
Number |
|
onFetch |
the method of fetch data |
Function |
|
upperRender |
insert elements other than lists |
Function |
|
Provider
prop |
description |
type |
default |
source |
data of list, make scrolling components controlled |
Array |
|