Installations
npm install pulltorefreshjs
Developer Guide
Typescript
No
Module System
CommonJS, UMD
Node Version
10.23.1
NPM Version
6.14.10
Score
95.2
Supply Chain
99.1
Quality
75.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Total Downloads
Cumulative downloads
Total Downloads
2,975,383
Last day
-68.3%
1,076
Compared to previous day
Last week
-30%
13,031
Compared to previous week
Last month
-5.6%
76,173
Compared to previous month
Last year
30.3%
885,616
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
A small, but powerful Javascript library crafted to power your webapp's pull to refresh feature. No markup needed, highly customizable and dependency-free!
Donations
If you found this project useful, please consider making a donation.
Installation
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');
API
init(options)
Will return a unique ptr-instance with adestroy()
method.destroyAll()
Stop and remove all registered ptr-instances.setPassiveMode(isPassive)
Enable or disable passive mode for event handlers (new instances only).
Options
distThreshold
(integer) Minimum distance required to trigger the refresh.
— Defaults to60
distMax
(integer) Maximum distance possible for the element.
— Defaults to80
distReload
(integer) After thedistThreshold
is reached and released, the element will have this height.
— Defaults to50
distIgnore
(integer) After which distance should we start pulling?
— Defaults to0
mainElement
(string) Before which element the pull to refresh elements will be?
— Defaults tobody
triggerElement
(string) Which element should trigger the pull to refresh?
— Defaults tobody
ptrElement
(string) Which class will the main element have?
— Defaults to.ptr
classPrefix
(string) Which class prefix for the elements?
— Defaults toptr--
cssProp
(string) Which property will be used to calculate the element's proportions?
— Defaults tomin-height
iconArrow
(string) The icon for bothinstructionsPullToRefresh
andinstructionsReleaseToRefresh
— Defaults to⇣
iconRefreshing
(string) The icon when the refresh is in progress.
— Defaults to…
instructionsPullToRefresh
(string) The initial instructions string.
— Defaults toPull down to refresh
instructionsReleaseToRefresh
(string) The instructions string when thedistThreshold
has been reached.
— Defaults toRelease to refresh
instructionsRefreshing
(string) The refreshing text.
— Defaults toRefreshing
refreshTimeout
(integer) The delay, in milliseconds before theonRefresh
is triggered.
— Defaults to500
getMarkup
(function) It returns the default HTML for the widget,__PREFIX__
is replaced.
— See src/lib/markup.jsgetStyles
(function) It returns the default CSS for the widget,__PREFIX__
is replaced.
— See src/lib/styles.jsonInit
(function) The initialize function.onRefresh
(function) What will the pull to refresh trigger? You can return a promise.
— Defaults towindow.location.reload()
resistanceFunction
(function) The resistance function, accepts one parameter, must return a number, capping at 1.
— Defaults tot => Math.min(1, t / 2.5)
shouldPullToRefresh
(function) Which condition should be met for pullToRefresh to trigger?
— Defaults to!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.
Use with React
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;
Contribute
To quickly start the development workflow:
- Install NodeJS (NVM)
- Run
nvm use 10 && npm install
- Then
npm run dev
This will watch and compile the bundle for browser usage.
E2E tests are executed with Testcafé.
- Run
npm test
to fire tests in the default browser, useBROWSER
to change this - ...or just run
make
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
Roadmap
- More events:
onPullStart
,onPullDown(direction, willRefresh)
,onRelease(willRefresh)
- Fully customizable CSS
- Gallery of use cases
- Advanced demos
- Tests
- Minified releases
No vulnerabilities found.
No security vulnerabilities found.