1.0.3 • Published 5 years ago
react-mobile-list v1.0.3
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