Thank you guys so much for all your support. The project has been discontinued. Instead, I will make another one with better performance on both desktop and mobile
React-Refresh-Infinite-TableView
👀
Features - Pull to Refresh
- Pull to Load More
- Fully Customizable Loading Indicator
- Subclass-able React Component
😍 ?
How to Install - via npm install
npm install --save react-refresh-infinite-tableview
- or manually
- extract the
rri.js
andspinner.css
fromlib/
, and use them in your projects.
🤔 ?
How to Use - You can use it with default spinners or your custom spinners
- Below are some setups, if you are looking for detail, please take a look at /examples
import ReactRefreshInfiniteTableView from 'react-refresh-infinite-tableview'
-
Use Default Spinners
- subclass the
ReactRefreshInfiniteTableView
class ExampleTableView extends ReactRefreshInfiniteTableView { //... }
- subclass the
-
attach an scroll event listener to your scrollview
<div className="tableView" onScroll={this.viewDidScroll}>
- set props to your tableview component
<ExampleTableView dataSource={this.state.data} onScrollToTop={this.handleScrollToTop} onScrollToBottom={this.handleScrollToBottom} />
- handle scroll events
// handle onScrollToTop handleScrollToTop(completed) { // refresh data // ... // once received data completed() this.setState({data: newData}) } // handle onScrollToBottom handleScrollToBottom(completed) { // load more data // ... // once received data completed() this.setState({data1: newData}) }
-
see ExampleTableView1 for details
-
Use your own loading indicators
- 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 ( <div className="list-group-item text-center indicator">🏃...</div> ) } return } // customize your Load-more Indicator here loadMoreIndicator() { if (this.state.isLoadingMore) { return ( <div className="list-group-item text-center indicator">...🏃</div> ) } return }
- render your indicators with your tableview
<div className="tableView" onScroll={this.viewDidScroll}> {this.refreshIndicator()} {cells} {this.loadMoreIndicator()} </div>
- see ExampleTableView2 for details
-
You can also disable the scrollToTop or scrollToBottom by just by just not setting the props.
<ExampleTableView dataSource={this.state.data} onScrollToBottom={this.handleScrollToBottom} />
TODO:
- Customizable default spinner
- Trigger scroll-to-top event when pull down if the tableview is already at the top
😮
Demo - Run the demo with
npm install npm start
then go to http://localhost:3000/
- 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.