react-custom-list-view
A listview component for ReactJS
npm install --save react-custom-list-vieworyarn add react-custom-list-view
Usage
import React, { Component } from 'react';import ReactListView from 'react-list-view'; const totalLength = 100;let count = 0; const sleep = (time = 500) => { return new Promise((resolve, _) => { setTimeout(resolve, time); });}; // mock list dataconst list = [ { text: 'Mike is Programming', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'Jack is Play Basketball', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'John is Singing', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'Rose is Dancing', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'Sarah is Writing', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'Mike is Programming', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'Jack is Play Basketball', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'John is Singing', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'Rose is Dancing', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, }, { text: 'Sarah is Writing', img: `https://source.unsplash.com/collection/${Math.floor( Math.random() * 100, )}/100x100`, },]; export default class App extends Component { state = { hasMore: true, list: [], }; // mock http request loadMore = async () => { if (!this.state.hasMore) return; if (count >= totalLength) { await this.sleep(1000); this.setState({ hasMore: false, }); } else { await this.sleep(1000); count += list.length; this.setState((prevState, _) => { return { list: prevState.list.concat(list), hasMore: true, }; }); } }; renderItem = (item, index) => ( <div className={'list-item'} key={index}> <div className="avatar-container"> <img src={item.img} className="avatar" alt="" /> </div> <div className="title">{item.text}</div> </div> ) render() { const { hasMore, list } = this.state; return ( <div> <ReactListView // containerHeight={400} loadMore={this.loadMore} renderItem={this.renderItem} hasMore={hasMore} list={list} // loadingHint={/* JSX Element */} // noDataHint={/* JSX Element */} /> </div> ); }}
Example
Loading
Nomore Data
License
MIT © wzhkobe2408