swipe-to-refresh
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

swipe-to-refresh

ES6 TypeScript License Published on webcomponents.org

NPM

A WebComponent to pull the window down and refresh

Demo image

Install

$ npm install swipe-to-refresh

Syntax

<html lang="en">

<head>
  <script src="swipe-refresh.js"></script>
  <script>
    function doRefresh() {
      console.log("Refresh!!");
    }
    function init() {
      document.querySelector("swipe-refresh").refresh = doRefresh;
    }
  </script>
</head>

<body onload="init()">
  <swipe-refresh></swipe-refresh>
  <div style="width: 100%; height: 150vh;"></div>
</body>

</html>

Demo page

The demo page: https://yishiashia.github.io/swipe-to-refresh/

Usage

If you want to customize this web component, you can import the library and implement your new class by extend SwipeToRefresh.

import SwipeToRefresh from "swipe-to-refresh";

class customizedSwipeToRefresh extends SwipeToRefresh {
    // override here
}

Options

pull-text (optional)

The hint message to ask user pull down the page. Default value is "Swipe to refresh".

drop-text (optional)

The hint message when user pull distance is larger than threshold. Default value is "Release to refresh".

refresh-text (optional)

The hint message when executing the refresh function. Default value is "Refreshing".

finish-text (optional)

The hint message after finish execuing refresh function. Default value is "Updates".

Package Sidebar

Install

npm i swipe-to-refresh

Weekly Downloads

13

Version

1.0.8

License

MIT

Unpacked Size

29.1 kB

Total Files

14

Last publish

Collaborators

  • yishiashia