A listview component for ReactJS
npm install --save react-custom-list-view
or
yarn add react-custom-list-view
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 data
const 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>
);
}
}
MIT © wzhkobe2408