react-pull-to-refresh

    1.1.2 • Public • Published

    react-pull-to-refresh

    npm install react-pull-to-refresh -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

    Install

    npm i react-pull-to-refresh

    DownloadsWeekly Downloads

    853

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    314 kB

    Total Files

    17

    Last publish

    Collaborators

    • bryaneaton13