React Reference > PullHook Component

<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

[improve this]
Name Type Description
onChangeState func Called when the pull hook inner state is changed. The state can be either “initial”, “preaction” or “action” Optional.
onChange func DEPRECATED! Use onChangeState instead. Optional.
onAction func Called when the pull hook is in the action state Optional.
onLoad func DEPRECATED! Use onAction instead. 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.