react-js-pull-to-refresh

Pull to refresh with react

Support all mobile(iOS, Android) and Desktop browser (Chrome, Safari, firefox, Opera, QQ, UC, ... etc)

Demo

See the demo in action at https://echoulen.github.io/react-pull-to-refresh/

Installation

npm install react-js-pull-to-refresh --save

or

yarn add react-js-pull-to-refresh

Props

|Name|Type|Required |:------:|:------:|:------:| |pullDownContent|JSX.Element|true| |releaseContent|JSX.Element|true| |refreshContent|JSX.Element|true| |pullDownThreshold|number|true| |onRefresh|Promise|true| |triggerHeight|number or 'auto'|false| |backgroundColor|string|false| |startInvisible|boolean|false|

Usage

Import PullToRefresh

import {PullToRefresh} from "react-js-pull-to-refresh";

Import default content (optional)

import {PullDownContent, ReleaseContent, RefreshContent} from "react-js-pull-to-refresh";

Sample

<PullToRefresh
  pullDownContent={<PullDownContent />}
  releaseContent={<ReleaseContent />}
  refreshContent={<RefreshContent />}
  pullDownThreshold={200}
  onRefresh={this.onRefresh}
  triggerHeight={50}
  backgroundColor='white'
  startInvisible={true}
>
  <div style={{height: '150vh', textAlign: 'center'}}>
    <div>PullToRefresh</div>
  </div>
</PullToRefresh>

Sample code in typescript

Link

Contributing

npm run dev