Licence
ISC
Version
1.0.14
Deps
0
Size
50 kB
Vulns
0
Weekly
0
js-pull-to-refresh
A small 'Pull To Refresh' plugin, written by native javascript
Install
Download by npm
npm install --save js-pull-to-refreshHow To Use
Directly, import it by the <script> tag.
<script src='js-pull-to-refresh/dist/index.umd.js'></script>
<script>
PullToRefresh.init(yourOptions);
</script>OR
Use your bundler, such as Webpack, to import it with ES6, AMD or CMD syntax.
import {init as initPullToRefresh} from "js-pull-to-refresh"
// const {init : initPullToRefresh} = require('js-pull-to-refresh');
const { destroy } = initPullToRefresh(yourOptions);API
init(options)Currentlly, this is the only public method used to initiate the PullToRefresh instance. It receives a plain object which can help to config the plugin ( See Options ), and returns a plain object which can be used to control the the initiated plugin ( See Returns ).
Options
| Name | Type | Default | Detail |
|---|---|---|---|
| mainElement | String or Element | 'body' | Class name string, like '.example'. Or an Element pointer which is already in the document. |
| triggerElement | String or Element | 'body' | Class name string, like '.example'. Or an Element pointer which is already in the document. |
| ptrContent | String or Element | See src/default-ptr.js | String which content is HTML. Or Element pointer to customized content. the value will be give by the 'onChange' like hook method as parameter. |
| pullThreshold | Number | 100 | Minimum distance which user pulled required to trigger refreshing. |
| pullLimit | Number | 200 | Maximum distance when the map ratio down to the 'resistMinRatio'. And it must be larger than 'pullThreshold'. |
| refreshHeight | Number | 70 | The height when user let go, it will change to. |
| resistMaxRatio | Number | 0.7 | The ratio when the distance user pulled is between 0 and 'pullThreshold'.(Must be between 'resistMinRatio' and 1) |
| resistMinRatio | Number | 0.1 | The ratio when the distance user pulled is larger than 'pullLimit'.(Must be between 0 and 'resistMaxRatio') |
| onChangeToInit | (ptrContentElement) => void | See src/default-ptr.js | The hook will be called when the state change to 'init'. |
| onChangeToPulling | (ptrContentElement) => void | See src/default-ptr.js | The hook will be called when the state change to 'pulling' . |
| onChangeToResisting | (ptrContentElement) => void | See src/default-ptr.js | The hook will be called when the state change to 'resisting'. |
| onChangeToRefresh | (ptrContentElement) => Promise | See src/default-ptr.js | The hook will be called when the state change to 'refresh'. Support async with promise |
| onPulling | (userPullDist) => void | See src/default-ptr.js | The hook will be called when user is pulling. Recommend use it to make the 'ptrContent' animating. But do not do heavy work in the method. |
Returns
| Name | Function Signature | Detail |
|---|---|---|
| destroy | ()=>void | Remove all related thing including element and event listener |
| disable | ()=>void | Forbid to trigger the plugin |
| forceToRefresh | ()=>void | Force to refresh with code |