PullToAction Component
A component that implements pull-to-refresh functionality for mobile and touch devices. It provides visual feedback during the pull action and handles the refresh operation.
<PullToAction onRefresh={async () => { await fetchNewData(); }} configuration={{ pullDownThreshold: 120, dragContent: true }}> <YourContent /></PullToAction> Copy
<PullToAction onRefresh={async () => { await fetchNewData(); }} configuration={{ pullDownThreshold: 120, dragContent: true }}> <YourContent /></PullToAction>
https://legacy.reactjs.org/docs/legacy-context.html
Component state
Gets the current configuration by merging default config with user provided config
The merged configuration
Handles the touch end event Triggers refresh if pull threshold is met
Handles the touch move event Calculates pull distance and updates visual feedback
The touch move event
Handles the touch start event Stores the initial Y position of the touch
The touch start event
Renders the PullToAction component
The rendered component
PullToAction Component
A component that implements pull-to-refresh functionality for mobile and touch devices. It provides visual feedback during the pull action and handles the refresh operation.
Example