Infinite Scrolling for React (in three lines)

componentDidUpdate() { this.bindScrollEvent(); } componentWillUnmount() { this.unbindScrollEvent(); } bindScrollEvent() { window.addEventListener('scroll', this.handleScroll); } unbindScrollEvent() { window.removeEventListener('scroll', this.handleScroll); } handleScroll() { const { isFetching, handleLoadMore } = this.props; if (isFetching) { return; } // detecting the reach of the bottom in three lines const { scrollHeight } = ReactDom.findDOMNode(this); const { innerHeight, scrollY } = window; const isBottom = (innerHeight + scrollY) >= scrollHeight; if (isBottom) { // ensure atomic action this.unbindScrollEvent(); handleLoadMore(); } }

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.