React component with Intersection Observer API

react_interaction_observer_api.js

// simple react component to demonstrate intersection observer API usage
// renders box in red when fully visible otherwise renders in blue

import React, { Component } from 'react';

class Box extends Component {

  constructor(props) {
    super(props)
    this.state = {
      prevRatio: 0.0,
    }
  }

  componentDidMount() {
    this.createObserver();
  }

  createObserver = () => {
    let observer;
    
    let options = {
      root: null,
      rootMargin: "0px",
      threshold: 1
    };
    
    observer = new IntersectionObserver(this.handleIntersect, options);
    observer.observe(this.$box);

  };

  handleIntersect = (entries, observer) => {

    entries.map((entry) => {

      if (entry.intersectionRatio > this.state.prevRatio) {
        this.$box.style.backgroundColor = `red`;
      } else {
        this.$box.style.backgroundColor = `blue`;
      }
  
      this.setState({ prevRatio: entry.intersectionRatio });

    });

  };

  render() {
    return (
      <div ref={(box) => { this.$box = box; }} className="Box">
        
      </div>
    );
  }
}

export default Box;