react-pull2refresh/README.md

A React component for pull to refresh on the web.

# react-pull-to-refresh

`npm install react-pull2refresh -S`

A pull to refresh component for the web.

Based on Andy Peatling's [Pull to Refresh for the Web](https://github.com/apeatling/web-pull-to-refresh)

![Demo GIF](https://github.com/bryaneaton13/react-pull-to-refresh/blob/master/docs/demo.gif)

## Usage

Your refresh handler function takes in `resolve` and `reject` to tell the PullToRefresh component when it's finished.

```javascript
handleRefresh(resolve, reject) {
  // do some async code here
  if (success) {
    resolve();
  } else {
    reject();
  }
}

```

Where you want to render the component:

```xml
<ReactPullToRefresh
  onRefresh={this.handleRefresh}
  className="your-own-class-if-you-want"
  style={{
    textAlign: 'center'
  }}>
  <h3>Pull down to refresh</h3>
  <div>{items}</div>
  <div>etc.</div>
</ReactPullToRefresh>
```



## CSS
Use the CSS from the example or from [here](https://github.com/apeatling/web-pull-to-refresh) as a starting point.


## All props

PropTypes

- **onRefresh**: `PropTypes.func.isRequired`
- **icon**: `PropTypes.element`
  - *default:*
  ```html
  <span className="genericon genericon-next"></span>
  ```
- **loading**: `PropTypes.element`
  - *default:*
  ```html
  <div className="loading">
    <span className="loading-ptr-1"></span>
    <span className="loading-ptr-2"></span>
    <span className="loading-ptr-3"></span>
  </div>
  ```
- **disabled**: `PropTypes.bool`
- **className**: `PropTypes.string`
- **style**: `PropTypes.object`
- **distanceToRefresh**: `PropTypes.number`
  - *default*: `70`
- **resistance**: `PropTypes.number`
  - *default*: `2.5`
- **hammerOptions**: `PropTypes.object`

## Thanks
[Andy Peatling](http://apeatling.com/)

## hack scroll issue
> to enable proper scroll capablilty, add css as blow
```css
.refresh-view.disabled {
  transform: translate3d(0px, 0px, 0px) !important;
}

.ptr-element.disabled {
  display: none !important;
}
```