Pull to Refresh for RiotJS

A simple Pull to Refresh component for the RiotJS framework.

Usage

Three simple steps to follow:

1. Pull to Refresh tags are defined
2. The riot-pulltorefresh file is required (Webpack, Rollup etc.)
3. Mount the tag!

<app>
  <pull-to-refresh></pull-to-refresh>
  <header class="header"></header>
</app>

<script>
  require('riot-pulltorefresh');

  riot.mount('pull-to-refresh', {
    timeout: 2500,
    listener: document.querySelector('.header'),
    onRefresh: function() {
      console.log('test');
    }
  });
</script>

Options

• timeout: Refresh delay
  • Default: 2000
  • Type: Number
• listener: The element the listeners will attach
  • Default: body
  • Type: DOMNode
• instructions: Whether the pull to refresh component will have instructions
  • Default: true
  • Type: Boolean
• instructionPull: Pulling instructions
  • Default: Pull down to refresh
  • Type: String
• instructionRelease
  • Default: Release to Refresh
  • Type: String
• instructionRefreshing
  • Default: Refreshing...
  • Type: String
• maxHeight: The maximum height that the user needs to pull to refresh
  • Default: 100
  • Type: Number
• onInit: Send in a function when the tag mounts
  • Default: null
  • Type: Function
• onRefresh: Instead of refreshing the page, you can define and/or send in a function
  • Default: location.reload()
  • Type: Function

Advanced Usage

Want to use your own icons instead? Then you're in luck!

<pull-to-refresh>
  <img if="{ pulling }" src="icon-pull.png">
  <img if="{ refreshing }" src="icon-refreshing.png">
</pull-to-refresh>

The component will automatically yield whatever you send in. Just make sure to use the pulling and/or refreshing exist.

NOTE: You can also use the show or hide boolean attributes

Development

First, you will to clone and install all dependencies:

git clone [email protected]:HDE/riot-pulltorefresh.git

To install dependencies, run:

yarn

Finally, just run:

npm run build

You can also use have riot watch the files and compile them:

npm run dev

Tests

To run tests, you'll need to run the following command:

npm test