Skip to content
This repository has been archived by the owner on Jan 11, 2019. It is now read-only.

A Subclass-able React Component to make your table ViewPull-To-Refresh and Infinite in just a minute

Notifications You must be signed in to change notification settings

calvinchankf/ReactRefreshinFiniteTableView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

npm version npm downloads


demo

Features 👀

  • Pull to Refresh
  • Pull to Load More
  • Fully Customizable Loading Indicator
  • Subclass-able React Component

How to Install 😍?

  1. via npm install
npm install --save react-refresh-infinite-tableview
  1. or manually
  • extract the rri.js and spinner.css from lib/, 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 {
      //...
    }
  • 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.

About

A Subclass-able React Component to make your table ViewPull-To-Refresh and Infinite in just a minute

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published