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'constApp()=>(<Provider><Scrollerelement={ListItem}/></Provider>)

* How to pass data to each list item?

asyncfunctionfetch(page,push){constlist=awaitgetData({page})// list: [{title}]push(list)}constListItem=({title})=><div>{title}</div>// As long as there is onFetch prop, that you can infinite load list data<Provider><Scrollerelement={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><ScrolleraverageHeight={200}element={ListItem}onFetch={fetch}/></Provider>

* No need to scroll infinitely, just optimize the list

<Providersource={bigList}><ScrolleraverageHeight={50}element={ListItem}></Provider>

* Insert elements other than lists

<Providersource={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