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;
    }

    Install

    npm i react-pull2refresh

    DownloadsWeekly Downloads

    3

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    325 kB

    Total Files

    17

    Last publish

    Collaborators

    • princewck