@gem-mine/rmc-list-view

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