🙋 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'

$3

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

$3

| Prop | Type | Description |
| :--- | :--- | :--- |
| onRefresh | Function | Called when a pull is triggered |

$3

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

``jsx
this.getData()}>
{this.state.cards.map(card => )}

`

Using some optional props:

`jsx
onRefresh={() => this.getTasks(currentUser)}
centerSpinner={false}
spinnerColor="#FFFFFF"
disabled={!currentUser}
>
{this.state.tasks.map(task => )}

`

Credits

Inspired by BoxFactura’s PulltoRefresh.js

Spinner SVG from Feather Icons

Built using NWB

Contributing

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 link
3. Open a directory with a test project and run npm link [package name]
4. Back in the react-preload-image directory run npm run build`