Js-pull-to-refresh NPM

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>

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