Pull2Refresh (Pull To Refresh)

A pull to refresh library without any dependency.

Screenshot

Example available here.

Installation

npm install --save pull2refresh

Usage

<div class="content">
  <div class="pulltorefresh" style="display: none">
    <i class="fa fa-refresh fa-2x" aria-hidden="true"></i>
  </div>

  <h1>Pull down to refresh</h1>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<script type="text/javascript" src="pull2refresh.js"></script>
<script>
  var p2r = new pull2refresh({
    // Pullable content
    pullableElement: document.querySelector(".content"),

    // Block that will appear when pulling
    refreshElement: document.querySelector(".pulltorefresh"),

    // Refresh callback
    onRefresh: function() {
      console.log("refresh !");
      p2r.done();
    },

    // Pull callback
    onPull: function(ratio) {
      console.log("pull percentage: " + (ratio * 100));
    }
  });
</script>

API

Constructor

var p2r = new pull2refresh({
  pullableElement,                        // Required. HTMLElement that can be pulled.
  refreshElement: HTMLElement;            // Required. HTLMElement that will appear during pull.
  onRefresh: () => void;                  // Required. Callback that will be called at the end of the pull.
  onPull?: (percentage: number) => void;  // Optionnal. Callback called during pull. A number between 0 and 1, representing the progression of the pull, is passed as argument of the callback.
  threshold?: number;                     // Optionnal. Threshold in pixel to reach to consider the pull finished. By default this threshold is the height of the refreshElement.
});

done()

p2r.done();

Function to call to indicate the refresh is done. After calling this function, the refreshElement will be hidden and a new pull to refresh action can be done.

Build

# Build js library and type.d.ts file
npm run build

# Build minified js library and type.d.ts file
npm run build:min

Licence

pull2refresh is released under the MIT license.