<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.


Pull to refresh

The PullHook component is used to add a pull to refresh functionality to a page. It can let the user refresh a page or load the latest data.

The PullHook component has three different states: initial, preaction and action. It starts in the initial state. When it’s pulled down below its height it will transition into the preaction state. If it’s released in initial state it will just bounce back. If it’s released in the preaction state, it will go into action state.

Every time the state changes the onChange property will be called.

When the component transitions into the action state, it will call the onLoad property with a done callback as an argument. Calling this function will cause it to return to the initial state.


Name Type Description
onChange function Called when the pull hook inner state is changed. The state can be either “initial”, “preaction” or “action” Optional.
onLoad function Called when the pull hook is in the action state Optional.
onPull function 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 number 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.