<PullHook />

Component that adds Pull to refresh functionality to an <ons-page> element. It can be used to perform a task when the user pulls down at the top of the page. A common usage is to refresh the data displayed in a page.

Usage

return (
      <PullHook onChange={this.onChange} onLoad={this.onLoad}>
      {
       (this.state.pullHookState === 'initial') ?
        <span >
          <Icon size={35} spin={false} icon='ion-arrow-down-a' />
          Pull down to refresh
        </span> :
        (this.state.pullHookState === 'preaction') ?
         <span>
           <Icon size={35} spin={false} icon='ion-arrow-up-a' />
           Release to refresh
        </span>
        :
        <span><Icon size={35} spin={true} icon='ion-load-d'></Icon> Loading data...</span>
    }
      </PullHook>
    );

Props

Name Type Description
onChange func Called when the pull hook inner state is changed. The state can be either “initial”, “preaction” or “action” Optional.
onLoad func Called when the pull hook is in the action state Optional.
onPull func Hook called whenever the user pulls the element. It gets the pulled distance ratio (scroll / height) and an animationOptions object as arguments. Optional.
disabled bool When set to true, the pull hook will be disabled. Optional.
height number The height of the pull hook in pixels. The default value is 64. Optional.
thresholdHeight number The threshold height of the pull hook in pixels. The default value is 96. Optional.
fixedContent bool If set to true, the content of the page will not move when pulling. Optional.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.