Skip to content

A List with infinite scrolling like RN FlatList without pull-to-refresh for mobile or pc web

Notifications You must be signed in to change notification settings

ZhengDian1024/react-mobile-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-mobile-list

A List with infinite scrolling like RN FlatList without pull-to-refresh for mobile or pc web

Simple example

const renderItem = (item, index) => <div>{item.name}</div>

<List
  data={dataList}
  renderItem={renderItem}
  keyExtractor={(item, index) => item.id}
  ItemSeparatorWidth={8}
  ItemSeparatorColor='#f7f7f7'
  onEndReached={() => { console.log('end') }}
/>

API and Configuration:

Property Type Default Description
data Array [] Your list data.
renderItem Function Required renderItem({ item: Object, index: Number }) Takes an item from data and renders it into the list.
ItemClassName String className for items.
ItemSeparatorWidth Number 1 Rendered in between each item, but not at the top or bottom.
ItemSeparatorColor String #e8e8e8 borderColor.
ListEmptyComponent Function Component Element Rendered when the list is empty. Can be a React Component Class, a render function, or a rendered element.
ListFooterComponent Function Component Element Rendered at the bottom of all the items. Can be a React Component Class, a render function, or a rendered element.
ListHeaderComponent Function Component Element Rendered at the top of all the items. Can be a React Component Class, a render function, or a rendered element.
keyExtractor Function Required (item: object, index: number) => string
onEndReached Function Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
onEndReachedThreshold Number 100 How far from the end the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 100 will trigger onEndReached when the end of the content is within 100px visible length of the list.

Installation

npm install react-mobile-list --save

About

A List with infinite scrolling like RN FlatList without pull-to-refresh for mobile or pc web

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published