React hook observes intersection of a node.

useVisibility.js

import { useState, useEffect } from 'react';
require('intersection-observer');

function useVisibility(ref , ratio = 0.1) {
  const [visible, setVisible] = useState(false);
  const callback = entries => {
    entries.forEach(entry => {
      setVisible(entry.intersectionRatio >= ratio) 
    })
  }
  useEffect(
    () => {
      const options = {
        threshold: ratio,
      };
      const observer = new IntersectionObserver(callback, options);
      const target = ref.current
      if (!target) return;
      
      observer.observe(target);
      return () => {
        observer.disconnect();
      };
    },
    [ratio],
  );
  return visible;
}

export default useVisibility;