React-pullable NPM

🙋 React Pullable

Simple, customizable React component for pull to refresh on touch devices.

Play with the demo

GIF

Usage

Install with yarn add react-pullable or npm install react-pullable

Import in your components with import Pullable from 'react-pullable'

Component styles

To prevent Chrome overscroll set overscroll-behavior-y: contain [or] none; on <body> (learn more).

Required props

Prop	Type	Description
onRefresh	Function	Called when a pull is triggered

Optional props

Prop	Type	Default	Description
className	String	`pullable`	Class applied to the component
centerSpinner	Boolean	`true`	Is the spinner vertically centered or top-aligned?
fadeSpinner	Boolean	`true`	Does the spinner fade in/out when pulled?
rotateSpinner	Boolean	`true`	Does the spinner rotate when pulled?
spinnerSize	Number	`24`	Pixel width/height of the spinner
spinnerOffset	Number	`0`	Pixel offset of the spinner (from the top)
spinnerColor	String	`#000000`	Color of the spinner
spinSpeed	Number	`1200`	Time to rotate the spinner 360° (in ms)
popDuration	Number	`200`	Time to expand the spinner before it rotates (`0` = skip pop)
distThreshold	Number	`spinnerSize * 3`	Distance where refresh is triggered
resistance	Number	`2.5`	How hard it is to pull down
refreshDuration	Number	`1000`	Time spent spinning before resetting (in ms)
resetDuration	Number	`400`	Time to reset (in ms)
resetEase	String	`cubic-bezier(0.215, 0.61, 0.355, 1)`	Ease when resetting
shouldPullToRefresh	Function	`() => window.scrollY <= 0`	When to allow pulling
disabled	Boolean		Disables all functionality

Examples

Using only the required onRefresh prop:

<Pullable onRefresh={() => this.getData()}>
  {this.state.cards.map(card => <Card data={card}/>)}
</Pullable>

Using some optional props:

<Pullable
  onRefresh={() => this.getTasks(currentUser)}
  centerSpinner={false}
  spinnerColor="#FFFFFF"
  disabled={!currentUser}
>
  {this.state.tasks.map(task => <Task data={task}/>)}
</Pullable>