rpr
react_pull_refresh
npm i react_pull_refresh
rpr

react_pull_refresh

React component for web pull to refresh

by Bryan Eaton

1.0.8 (see all)License:MITTypeScript:Not Found
npm i react_pull_refresh
Readme

react-pull-to-refresh

npm install react-pull-to-refresh

A pull to refresh component for the web.

Based on Andy Peatling's Pull to Refresh for the Web

Demo GIF

Usage

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

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

Where you want to render the component:

<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 as a starting point.

All props

React.PropTypes

  • onRefresh
  • function (required)
  • icon
  • React element
  • default:
 <span className="genericon genericon-next"></span>
  • loading
  • element
  • default:
<div className="loading">
  <span className="loading-ptr-1"></span>
  <span className="loading-ptr-2"></span>
  <span className="loading-ptr-3"></span>
</div>
  • disabled
  • boolean
  • className
  • string
  • style
  • object
  • distanceToRefresh
  • number
  • default: 70
  • resistance
  • number
  • default: 2.5
  • hammerOptions
  • object

Thanks

Andy Peatling

Downloads/wk

2

GitHub Stars

395

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

6

OPEN ISSUES

6

OPEN PRs

0
VersionTagPublished
1.0.8
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate