Panel With Visibility Report on Scrolling

You can render a list of item inside this React component and have it reported item's visibility when scrolling

Installation

Via NPM respository:

npm install react-scroll-panel

Usage

import React, { Component } from "react";
import Panel from "react-scroll-panel";

class ExampleApp extends Component {

  /**
   * This method will be called when users the panel scroll up/down
   * @param {Event} evt scrolling event
   * @param {Array} list list of visible HTMLElement nodes
   * [{
   *   node: HTMLElement node,
   *   index: order of element in list
   * }]
   */
  onScroll(evt, list) { }

  render() {
    const items = [];
    Array.from(new Array(50), (val, index) => {
      items.push(<p key={index}>{index}</p>);
    });

    return (
      <Panel
        className="panel"
        onScroll={this.onScroll}
        onRef={input => {
          this.div = input;
        }}>{items}</Panel>
    );
  }
}

export default ExampleApp;

Subcribe onScroll event on Panel component, every users scroll up/down, onScroll method will be called with the list of visible HTMLElement nodes passed in parameters.

License

MIT