This is a pull to refresh component depend on react.

Notice only support touch event now.

Install

npm i -S rc-pull-to-refresh@0.1.1

Usage

Use SimplePTR (see example)

import React from 'react';
import { render } from 'react-dom';
import SimplePTR from '../src/SimplePTR';

class Page extends React.Component {

  state = {
    loading: false,
    dataSource: this.randomData()
  };

  moreLoading = false;

  randomData(number = 50) {
    const ds = [];
    for (var i = 0; i < number; i++) {
      ds.push(Math.random());
    }
    return ds;
  }

  refresh = () => {
    this.setState({
      loading: true
    });
    setTimeout(() => this.setState({
      loading: false,
      dataSource: this.randomData()
    }), 2000);
  };

  addMore = () => {
    if (!this.moreLoading) {
      this.moreLoading = true;
      setTimeout(() => this.setState((prevState) => ({
        dataSource: prevState.dataSource.concat(this.randomData())
      }), () => this.moreLoading = false));
    }
  };

  render () {
    const { loading, dataSource } = this.state;

    return (
      <SimplePTR
        className="my-ptr"
        loading={loading}
        onRefresh={this.refresh}
        onEndReached={this.addMore}
        onEndReachedThreshold={60}
      >
        {dataSource.map((data, index) =>
          <div key={index} style={{ height: 48 }}>{data}</div>
        )}
      </SimplePTR>
    )
  }
}

render(
  <Page />,
  document.getElementById('main')
);

Use PullToRefresh (if you want a custom header)

import PullToRefresh from 'rc-pull-to-refresh';

render() {
  const { loading, onRefresh, children, className, resistance } = this.props

  return (
    <PullToRefresh
      className={className}
      loading={loading}
      resistance={resistance}
      distanceToRefresh={60}
      header={{
        height: 60,
        render: this.renderHeader
      }}
      onRefresh={onRefresh}
    >
      {children}
    </PullToRefresh>
  )
}

[Other] Use Refreshing icon

import Refreshing from 'rc-pull-to-refresh/lib/Refreshing';

<Refreshing style={{ width: 50, height: 50 }} />

API

• onRefresh
  • func() (required)
• loading
  • bool (required)
• resistance
  • number
  • default: 2.5
  • The dragging resistance level, the higher the more you'll need to drag down.
• className
  • string
• style
  • object
• onEndReached
  • func
  • Called when all rows have been rendered and the list has been scrolled to within onEndReachedThreshold of the bottom.
• onEndReachedThreshold
  • number
  • Threshold in pixels for calling onEndReached.
• distanceToRefresh
  • PullToRefresh only
  • number
  • default: 60
• header
  • PullToRefresh only
  • object (required)
  • height
    • number (required)
    • header's height
  • render
    • func (required)
      • Object{ loading, canRefresh, offset }
    • header's render

Development

npm i
npm run dev

open http://localhost:8080