How do you get the active element using Waypoint?

Question

I'm using Waypoint (7.3.2) in React (16) to try and create a list of scrollable items where each item fades to invisible as it reaches the top of the div. My basic question is how do I get a reference to the element that enters/leaves the waypoint in the event or callback?

I thought that by including ref={} in the element I wanted to get in the callback I would get a reference to the element and be able to change the opacity. The following is the code where Waypoint is plugged in:

class Division extends Component {
    constructor(props) {
        super(props);
    }

    _handleWayPointEnter = (event) => {
        console.log("Waypoint enter " + JSON.stringify(event, 4));
    }
    _handleWayPointLeave = (event) => {
        console.log("Waypoint leave " + JSON.stringify(event, 4));
    }

    render() {
        let inlineStyle= {opacity : this.state.opacity};
        return (
            <Waypoint debug={false} onEnter={this._handleWayPointEnter} onLeave={this._handleWayPointLeave} >
                <div style={inlineStyle} ref={this.props.innerRef} className="sch-division">
                    {this.props.name}<br/>
                    <SomeOtherComponent />
                </div>
            </Waypoint>
        );
    }

}

export default Division;

Any/all replies appreciated!

-- griff

Answer 1

From react-waypoint docs :

If you do pass a child, it can be a single DOM component (e.g. <div>) or a composite component (e.g. <MyComponent />).

Waypoint needs a DOM node to compute its boundaries. When you pass a DOM component to Waypoint, it handles getting a reference to the DOM node through the ref prop automatically. If you pass a composite component, you need to make use of the innerRef prop passed by Waypoint to your component. Simply pass it through as the ref of a DOM component and you're all set. Like in this example:

class Block extends React.Component {
  render() {
    return <div ref={this.props.innerRef}>Hello</div>
  }
}
Block.propTypes = {
  innerRef: PropTypes.func.isRequired,
}

const App = () => (
  <Waypoint>
    <Block />
  </Waypoint>
)

Here you're using a single DOM component (<div>), i suggest you store your div ref like this :

<div style={inlineStyle} ref={(div) => { this.divinwaypoint = div; }} className="sch-division">

Then use it in your functions :

_handleWayPointEnter = (event) => {
   console.log("Waypoint enter " + JSON.stringify(event, 4));
   this.divinwaypoint.style.opacity = 0;
}

Edit: i'm not using waypoint but i think it should display your component ref in the event prop.