Pull-to-refresh-react NPM

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 }