zhengdian1024 / react-mobile-list Goto Github PK

View Code? Open in Web Editor NEW

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

JavaScript 97.23% CSS 2.77%

react-mobile-list's Introduction

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.