react-scroll-detector

Demo

Live demo

Local demo:

git clone https://github.com/rechat/react-scroll-detector.git
cd react-scroll-detector
npm i && npm start

Installation

npm i react-scroll-detector --save

Example

import React from 'react'
import ReactScrollDetector from 'react-scroll-detector'

class App extends React.Component {
  handleScrollBottom() {
    console.log('On Scroll Bottom')
  }

  handleScrollTop() {
    console.log('On Scroll Top')
  }

  render() {
    return (
      <ReactScrollDetector
        debounceTime={500}
        accuracy={90}
        onScrollBottom={this.handleScrollBottom}
        onScrollTop={this.handleScrollTop}
      >
        <div style={{ minHeight: '500px', maxHeight: '500px', overflow: 'auto' }}>
          ...
        </div>
      </ReactScrollDetector>
    )
  }
}

API

| Prop | Type | Description | Default | | --- | --- | --- | --- | | onScrollBottom | Function | Triggers when scroll reaches bottom | (top) => {} | | onScrollTop | Function | Triggers when scroll reaches top | (top) => {} | | accuracy | Number | Accuracy of detection | 90 | | debounceTime | Number | D etection debounce time in milli seconds | 500 |

License

MIT