Skip to content

cuongdevjs/pull-to-refresh-react

Repository files navigation

pull-to-refresh-react

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

npm version JavaScript Style Guide

Install

npm i pull-to-refresh-react

Link Demo (Turn on mobile mode)

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