Gathering detailed insights and metrics for pulltorefreshjs
Gathering detailed insights and metrics for pulltorefreshjs
Gathering detailed insights and metrics for pulltorefreshjs
Gathering detailed insights and metrics for pulltorefreshjs
npm install pulltorefreshjs
Typescript
Module System
Node Version
NPM Version
95.5
Supply Chain
99.1
Quality
75.9
Maintenance
100
Vulnerability
100
License
Total
2,932,004
Last Day
833
Last Week
18,256
Last Month
81,838
Last Year
880,517
Minified
Minified + Gzipped
Cumulative downloads
Total Downloads
Last day
3.2%
833
Compared to previous day
Last week
-2.8%
18,256
Compared to previous week
Last month
8.4%
81,838
Compared to previous month
Last year
31.9%
880,517
Compared to previous year
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:
1$ npm install pulltorefreshjs --save-dev 2$ wget -O pulltorefresh.js https://unpkg.com/pulltorefreshjs
Include the JS file in your webapp and initialize it:
1const ptr = PullToRefresh.init({ 2 mainElement: 'body', 3 onRefresh() { 4 window.location.reload(); 5 } 6});
Bundlers can consume pulltorefreshjs
as CommonJS and ES6-modules syntax:
1import PullToRefresh from 'pulltorefreshjs'; 2// or 3const PullToRefresh = require('pulltorefreshjs');
init(options)
Will return a unique ptr-instance with a destroy()
method.destroyAll()
Stop and remove all registered ptr-instances.setPassiveMode(isPassive)
Enable or disable passive mode for event handlers (new instances only).distThreshold
(integer)
Minimum distance required to trigger the refresh.
60
distMax
(integer)
Maximum distance possible for the element.
80
distReload
(integer)
After the distThreshold
is reached and released, the element will have this height.
50
distIgnore
(integer)
After which distance should we start pulling?
0
mainElement
(string)
Before which element the pull to refresh elements will be?
body
triggerElement
(string)
Which element should trigger the pull to refresh?
body
ptrElement
(string)
Which class will the main element have?
.ptr
classPrefix
(string)
Which class prefix for the elements?
ptr--
cssProp
(string)
Which property will be used to calculate the element's proportions?
min-height
iconArrow
(string)
The icon for both instructionsPullToRefresh
and instructionsReleaseToRefresh
⇣
iconRefreshing
(string)
The icon when the refresh is in progress.
…
instructionsPullToRefresh
(string)
The initial instructions string.
Pull down to refresh
instructionsReleaseToRefresh
(string)
The instructions string when the distThreshold
has been reached.
Release to refresh
instructionsRefreshing
(string)
The refreshing text.
Refreshing
refreshTimeout
(integer)
The delay, in milliseconds before the onRefresh
is triggered.
500
getMarkup
(function)
It returns the default HTML for the widget, __PREFIX__
is replaced.
getStyles
(function)
It returns the default CSS for the widget, __PREFIX__
is replaced.
onInit
(function)
The initialize function.onRefresh
(function)
What will the pull to refresh trigger? You can return a promise.
window.location.reload()
resistanceFunction
(function)
The resistance function, accepts one parameter, must return a number, capping at 1.
t => Math.min(1, t / 2.5)
shouldPullToRefresh
(function)
Which condition should be met for pullToRefresh to trigger?
!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.
1 2import React, { Component } from 'react'; 3import ReactDOMServer from 'react-dom/server'; 4import PullToRefresh from 'pulltorefreshjs'; 5import { faSyncAlt} from '@fortawesome/free-solid-svg-icons'; 6import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 7 8class App extends Component 9{ 10 componentDidMount() 11 { 12 PullToRefresh.init({ 13 mainElement: 'body', 14 onRefresh() { 15 window.location.reload(); 16 }, 17 iconArrow: ReactDOMServer.renderToString( 18 <FontAwesomeIcon icon={faSyncAlt} /> 19 ), 20 iconRefreshing: ReactDOMServer.renderToString( 21 <FontAwesomeIcon icon={faSyncAlt} spin={true} /> 22 ), 23 }); 24 } 25 26 componentWillUnmount() 27 { 28 // Don't forget to destroy all instances on unmout 29 // or you will get some glitches. 30 PullToRefresh.destroyAll(); 31 } 32 33 render() 34 { 35 return ( 36 <div> 37 <h1>App</h1> 38 </div> 39 ); 40 } 41} 42 43export 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.
1$ npm test --live chrome tests/e2e/cases --debug-on-fail
onPullStart
, onPullDown(direction, willRefresh)
, onRelease(willRefresh)
No vulnerabilities found.
No security vulnerabilities found.