A quick and powerful plugin for your pull-to-refresh needs in your webapp.
MIT License
A small, but powerful Javascript library crafted to power your webapp's pull to refresh feature. No markup needed, highly customizable and dependency-free!
If you found this project useful, please consider making a donation.
Download PulltoRefresh either from the NPM Registry, CDNJS or UNPKG:
$ npm install pulltorefreshjs --save-dev
$ wget -O pulltorefresh.js https://unpkg.com/pulltorefreshjs
Include the JS file in your webapp and initialize it:
const ptr = PullToRefresh.init({
mainElement: 'body',
onRefresh() {
window.location.reload();
}
});
Bundlers can consume pulltorefreshjs
as CommonJS and ES6-modules syntax:
import PullToRefresh from 'pulltorefreshjs';
// or
const PullToRefresh = require('pulltorefreshjs');
init(options)
destroy()
method.destroyAll()
setPassiveMode(isPassive)
distThreshold
(integer)60
distMax
(integer)80
distReload
(integer)distThreshold
is reached and released, the element will have this height.50
distIgnore
(integer)0
mainElement
(string)body
triggerElement
(string)body
ptrElement
(string).ptr
classPrefix
(string)ptr--
cssProp
(string)min-height
iconArrow
(string)instructionsPullToRefresh
and instructionsReleaseToRefresh
⇣
iconRefreshing
(string)…
instructionsPullToRefresh
(string)Pull down to refresh
instructionsReleaseToRefresh
(string)distThreshold
has been reached.Release to refresh
instructionsRefreshing
(string)Refreshing
refreshTimeout
(integer)onRefresh
is triggered.500
getMarkup
(function)__PREFIX__
is replaced.getStyles
(function)__PREFIX__
is replaced.onInit
(function)onRefresh
(function)window.location.reload()
resistanceFunction
(function)t => Math.min(1, t / 2.5)
shouldPullToRefresh
(function)!window.scrollY
Please note that this default is useful whenever you're setting mainElement as the body of the document, if you need it in another element with overflow, use !this.mainElement.scrollTop
. Refer to the multiple instances demo for reference.With ReactDOMServer and renderToString()
you can use components as
icons instead of just strings.
In this example we also use Font Awesome to get nice icons with animation, but you can
use any React component you like.
import React, { Component } from 'react';
import ReactDOMServer from 'react-dom/server';
import PullToRefresh from 'pulltorefreshjs';
import { faSyncAlt} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
class App extends Component
{
componentDidMount()
{
PullToRefresh.init({
mainElement: 'body',
onRefresh() {
window.location.reload();
},
iconArrow: ReactDOMServer.renderToString(
<FontAwesomeIcon icon={faSyncAlt} />
),
iconRefreshing: ReactDOMServer.renderToString(
<FontAwesomeIcon icon={faSyncAlt} spin={true} />
),
});
}
componentWillUnmount()
{
// Don't forget to destroy all instances on unmout
// or you will get some glitches.
PullToRefresh.destroyAll();
}
render()
{
return (
<div>
<h1>App</h1>
</div>
);
}
}
export default App;
To quickly start the development workflow:
nvm use 10 && npm install
npm run dev
This will watch and compile the bundle for browser usage.
E2E tests are executed with Testcaf.
npm test
to fire tests in the default browser, use BROWSER
to change thismake
to setup the dependencies and run tests only (e.g. CI)Advanced debug can be achieved with testcafe-live
, e.g.
$ npm test --live chrome tests/e2e/cases --debug-on-fail
onPullStart
, onPullDown(direction, willRefresh)
, onRelease(willRefresh)