React Intersection Observer

IntersectionObserver.js

import React from "react";

export default class IntersectionObserver extends React.Component {
  static defaultProps = {
    root: null,
    rootMargin: undefined,
    threshold: 0,
    onChange: () => null,
    render: () => null
  };

  state = {
    entry: {}
  };

  observer = null;

  componentDidMount() {
    const { root, rootMargin, threshold } = this.props;
    if (window && window.IntersectionObserver) {
      this.observer = new window.IntersectionObserver(this.handleIntersect, {
        root,
        rootMargin,
        threshold
      });
      this.observer.observe(this.node);
    }
  }

  componentWillUnmount() {
    this.observer.disconnect();
  }

  handleIntersect = ([entry]) => {
    const { onChange } = this.props;
    this.setState({ entry });
    onChange(entry);
  };

  handleRef = node => (this.node = node);

  render() {
    const { render } = this.props;
    const { entry } = this.state;

    return render({ refHandler: this.handleRef, entry });
  }
}

usage.js

import IntersectionObserver from "./IntersectionObserver";

() => 
  <Intersection
    render={({ refHandler, entry }) => (
      <div ref={refHandler}>
        {entry.isIntersecting ? "i'm in view" : "you can't see me"}
      </div>
    )}
  />