observer

intersectionObserver.jsx

import { h, Component } from "preact";

class Observer extends Component {
  constructor(props) {
    super(props);
    this.state = { isVisible: false };
    this.io = null;
    this.container = null;
  }

  componentDidMount() {
    // polyfill IntersectionObserver on-demand! 
    (window.IntersectionObserver ? Promise.resolve() : import("intersection-observer")).then(() => {
      this.io = new window.IntersectionObserver(
        entries => {
          entries.forEach(entry => {
            this.setState({ isVisible: entry.isIntersecting });
          });
        },
        { root: null, rootMargin: "100px", threshold: 0.5 } // adjust accordingly (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Properties)
      );
      this.io.observe(this.container);
    });
  }

  componentWillUnmount() {
    if (this.io) {
      this.io.disconnect();
    }
  }

  render() {
    return (
      <div
        ref={div => {
          this.container = div;
        }}
      >
        {Array.isArray(this.props.children)
          ? this.props.children.map(child => child(this.state.isVisible))
          : this.props.children(this.state.isVisible)} // calling the child function
      </div>
    );
  }
}

export default Observer;