react-js-pull-to-refresh

React pull to refresh

Usage no npm install needed!

<script type="module">
  import reactJsPullToRefresh from 'https://cdn.skypack.dev/react-js-pull-to-refresh';
</script>

README

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)

npm version license codebeat badge size

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