rmc-list-view
list view ui component for react (mobile web)
install
npm i @gem-mine/rmc-list-view
Usage
import React from 'react'
import { ListView } from '@gem-mine/rmc-list-view'
const dataSource = ['A', 'B', 'C', 'D', 'E', 'F']
class Demo extends React.Component {
renderItem = (data) => (
<div>{data}</div>
)
render() {
return (
<ListView
dataSource={dataSource}
renderItem={this.renderItem}
>
)
}
}Development
npm install
npm run watch-tsc
npm start
Example
http://127.0.0.1:8000/examples/
API
props
| name | type | default | description |
|---|---|---|---|
| dataSource | any[] | data source | |
| renderItem | (data, index) => ReactNode | Takes a data entry from the data source and its ids and should return a renderable component to be rendered as the row | |
| renderHeader | () => ReactNode | the ListView header | |
| renderFooter | () => ReactNode | the ListView footer | |
| sections | string[] | the section data | |
| renderSection | (data) => ReactNode | render section | |
| pageSize | number | 1 | Number of rows to render per loop |
| initialListSize | number | 10 | How many rows to render on initial component mount |
| onEndReachedThreshold | number | 10 | Threshold in pixels for calling onEndReached |
| onEndReached | () => void | Called when all rows have been rendered and the list has been scrolled to within onEndReachedThreshold of the bottom | |
| onScroll | (e) => void | Fires at most once per frame during scrolling. The frequency of the events can be controlled using the scrollEventThrottle prop | |
| scrollEventThrottle | number | 50 | This controls how often the scroll event will be fired while scrolling |
| renderBodyComponent | () => ReactNode | render listview body wrapper component | |
| useBodyScroll | boolean | false | use html body scroll |
| pullToRefresh | React.ReactElement | pullToRefresh container element | |
| renderSectionWrapper | React.ReactElement | render listview section wrapper component |
Test Case
npm test
Coverage
npm run coverage
open coverage/ dir
License
MIT