clarity-react-infinite-list
A browser efficient infinite list for React apps that allows loading of items with differing heights and sizes.
The minimal API is to create a ListViewDataSource
from clarity-react-infinite-list
, populate it with an array of data, and add a ListView
component
with that data source and a renderRow
callback which takes an item from the data source and returns a renderable component.
Install
npm install clarity-react-infinite-list
Demos
Features
- Lazy load and fetch data from API requests in batches.
- Infinite number of items and batches
- Items can have dynamic heights and sizes, that do not have to be declared before hand.
- Add in a custom loading component.
Dependencies
Version 15.x.x
react
react-dom
Minimal Example
;;;;; const styles = ...; { superprops; thisstate = dataSource: 30 lastUserId: 0 ; this_renderRow = this_renderRow; this_onEndReached = this_onEndReached; this_loadingComponent = this_loadingComponent; } { return <ListItem key=rowId rowData=rowData rowId=rowId /> ; } { if !thispropsisFetchingUsers thisprops; thisprops; } { return <div style=stylesloading>Loading...</div> ; } { thisprops; thisprops; } { if nextPropsusersnextPropsuserslength - 1 && thisstatelastUserId !== nextPropsusersnextPropsuserslength - 1id this; } { return <div style=stylescontainer> <div style=stylesheader> Clarity React Infinite Scroll Example </div> <ListView style=styleslistView dataSource=thisstatedataSource renderRow=this_renderRow onEndReached=this_onEndReached loadingComponent=this_loadingComponent onEndReachedThreshold=5000 ref= thislistView = listView /> </div> ; } const mapStateToProps = { return users: stateusers isFetchingUsers: stateisFetchingUsers ;}; const mapDispatchToProps = getUsersBatch setFetchingUsersStatus; mapStateToProps mapDispatchToPropsMain;
Props
dataSource
ListViewDataSource
- An instance of
ListViewDataSource
to use.
renderRow
function(rowData, rowId) => renderableComponent
- Takes a data entry from the data source and its id and should return a renderable component to be rendered as the row.
onEndReached
function()
- Called when the list has been scrolled to within the
onEndReachedThreshold
of the bottom.
loadingComponent
function() => renderableComponent
- Should return a renderable component, to be displayed at bottom of list when loading new batches.
onEndReachedThreshold
number
- Threshold in pixels for calling
onEndReached
Methods
scrollTo(topPosition: number)
- Scrolls to the given topPosition of the
ListView
.
isScrollbarActive()
- Returns a boolean of whether or not the
ListView
has enough content to have an active vertical scrollbar.
digBatches()
- Manually dig batches from the props.onEndReached function.