A Subclass-able React Component to make a simple Pull-To-Refresh and Infinite TableView
npm install react-refresh-infinite-tableview
___
!demo
- Pull to Refresh
- Pull to Load More
- Fully Customizable Loading Indicator
- Subclass-able React Component
0. via npm install
``
npm install --save react-refresh-infinite-tableview
1. or manually
- extract the ReactRefreshInfiniteTableView.js` and `spinner.css` from `lib/`, and use them in your projects.
`
import ReactRefreshInfiniteTableView from 'react-refresh-infinite-tableview'
- Use Default Spinners
- subclass the `ReactRefreshInfiniteTableView`
class ExampleTableView extends ReactRefreshInfiniteTableView {
//...
}
- attach an scroll event listener to your scrollview // once received data // once received data - Use your own loading indicators - You can also disable the scrollToTop or scrollToBottom by just by just not setting the props. - Customizable default spinner - Run the demo with - P.S. In the demo, you may notice that the page will auto-refresh after you change the code because the demo is based on my another repo React-SPA-Starter, which is a very handy starter-kit for react dev.
`
`
- set props to your tableview component
onScrollToTop={this.handleScrollToTop}
onScrollToBottom={this.handleScrollToBottom}
/>
- handle scroll events
// handle onScrollToTop
handleScrollToTop(completed) {
// refresh data
// ...
completed()
this.setState({data: newData})
}
// handle onScrollToBottom
handleScrollToBottom(completed) {
// load more data
// ...
completed()
this.setState({data1: newData})
}
- see ExampleTableView1 for details
- first, you need to follow the basic set up as the above(use default spinner)
- set useDefaultIndicator to false for your component
useDefaultIndicator={false}
- construct your own indicators with jsx
// customize your Refresh Indicator here
refreshIndicator() {
if (this.state.isRefreshing) {
return (
🏃...
)
}
return
}
// customize your Load-more Indicator here
loadMoreIndicator() {
if (this.state.isLoadingMore) {
return (
...🏃
)
}
return
}
- render your indicators with your tableview
{this.refreshIndicator()}
{cells}
{this.loadMoreIndicator()}
- see ExampleTableView2 for details
onScrollToBottom={this.handleScrollToBottom}
/>$3
- Trigger scroll-to-top event when pull down if the tableview is already at the top$3
npm install
npm start
then go to http://localhost:3000/