react-pull2refresh

1.1.4 • Public • Published

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

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

PropTypes

  • onRefresh: PropTypes.func.isRequired
  • icon: PropTypes.element
    • default:
    <span className="genericon genericon-next"></span>
  • loading: PropTypes.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: 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

hack scroll issue

to enable proper scroll capablilty, add css as blow

.refresh-view.disabled {
  transform: translate3d(0px0px0px!important;
}
 
.ptr-element.disabled {
  display: none !important;
}

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.4
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.1.4
    0
  • 1.1.3
    0
  • 1.1.2
    0

Package Sidebar

Install

npm i react-pull2refresh

Weekly Downloads

0

Version

1.1.4

License

MIT

Unpacked Size

325 kB

Total Files

17

Last publish

Collaborators

  • princewck