pull-to-refresh-react

Pull To Refresh for Progressive Web Application (only Mobile) React JS

Install

npm i pull-to-refresh-react

Link Demo (Turn on mobile mode)

NPM

Github

Usage

import React, { Component } from 'react'

import PullToRefresh from "pull-to-refresh-react";

class App extends Component {
  onRefresh() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
      }, 5000);
    });
  }

  test() {
    alert("click");
  }

  render() {
    return (
      <PullToRefresh
        options={{ pullDownHeight: 100 }}
        onRefresh={this.onRefresh}
      >
        <div
          style={{
            height: "500px",
            width: "100%",
            backgroundColor: "blur",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <div>Nguyen Manh Cuong - CuongStf</div>
          <button
            style={{ border: "1px solid black" }}
            onClick={() => this.test()}
          >
            Event Disabled when refreshing
          </button>
        </div>
      </PullToRefresh>
    );
  }
}

Prop

| Prop | Type | Default | Description | | :--------- | :-------: | :-----: | :----------- | | onRefresh | async function (required) | - | Function happend when onRefresh | | textError | string (optional) | Error | Text display when error | | textStart | string (optional) | Start | Text display when start touch | | textReady | string (optional) | Ready | Text display when ready onRefresh | | textRefresh | string (optional) | Refresh | Text display when refreshing | | options | object (optional) | { pullDownHeight: 60 } | { pullDownHeight: height of Pull Down } |

Resource

Inspired from vue-pull-refresh

License

MIT © CuongStf