Pull To Refresh Library With Pure JavaScript – Pull.js

Pull.js is a tiny and zero-dependency JavaScript library that provides pull to refresh & pull to load functionality for your mobile webpages.

How to use it:

Install Pull.js library via NPM.

$ npm save --save pulljs

Import the Pull.js to your project.

import Pull from 'pulljs';

Initialize & setup the Pull.js library.

Pull.init({
  // parameters here
});

All possible parameters with default values.

Pull.init({
  distThreshold: 60, // in ms
  distMax: 80,
  distReload: 50,
  bodyOffset: 20,
  mainElement: 'body',
  triggerElement: 'body',
  ptrElement: '.ptr',
  classPrefix: 'ptr--',
  cssProp: 'min-height',
  containerClassName: '',
  boxClassName: '',
  contentClassName: '',
  textClassName: '',
  instructionsPullToRefresh: 'Pull down to refresh',
  instructionsReleaseToRefresh: 'Release to refresh',
  instructionsRefreshing: 'Refreshing',
  refreshTimeout: 500,
  ptrOnDesktop: false, // enable desktop mouse functionality
  onInit: () => {},
  onRefresh: () => location.reload(),
  resistanceFunction: t => Math.min(1, t / 2.5),
});

Changelog:

v0.2.0 (03/07/2019)

• Add optional ptr functionality for desktop.