js-pull-to-refresh

A small 'Pull To Refresh' plugin, written by native javascript

Install

Download by npm

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

How 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 |