Simple, customizable pull to refresh.
npm install react-pullableSimple, customizable React component for pull to refresh on touch devices.
!GIF
Install with yarn add react-pullable or npm install react-pullable
Import in your components with import Pullable from 'react-pullable'
To prevent Chrome overscroll set overscroll-behavior-y: contain [or] none; on (learn more).
| Prop | Type | Description |
| :--- | :--- | :--- |
| onRefresh | Function | Called when a pull is triggered |
| 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 |
Using only the required onRefresh prop:
``jsx`
{this.state.cards.map(card =>
Using some optional props:
`jsx`
centerSpinner={false}
spinnerColor="#FFFFFF"
disabled={!currentUser}
>
{this.state.tasks.map(task =>
Inspired by BoxFactura’s PulltoRefresh.js
Spinner SVG from Feather Icons
Built using NWB
To test using the included demo app:
1. Clone the repo
2. Open the directory and run npm install and npm start
3. The demo app will update to reflect any changes to it or the component
To test in your own local app:
1. Clone the repo
2. Open the directory and run npm install and npm linknpm link [package name]
3. Open a directory with a test project and run npm run build`
4. Back in the react-preload-image directory run