A React component that notifies you when it enters or exits the viewport

import VisibilityDetector from 'react-visibility-detector';

function handleVisibilityChange ({ visible, directionX, directionY }) {
  console.log('Element is now %s', visible ? 'visible' : 'hidden');
  console.log('Horizontal direction %s', directionX); // left, right, or none if no changed or initial
  console.log('Vertical direction %s', directionY); // up, down or none if no changed or initial
}

function MyComponent (props) {
  return (
    <VisibilityDetector onVisibilityChange={handleVisibilityChange}>
      <div>...content goes here...</div>
    </VisibilityDetector>
  );
}

// with hook

import { useChangeVisibility } from 'react-visibility-detector';

function onVisibilityChange ({ visible, directionX, directionY }) {
  console.log('Element is now %s', visible ? 'visible' : 'hidden');
  console.log('Horizontal direction %s', directionX); // left, right, or none if no changed or initial
  console.log('Vertical direction %s', directionY); // up, down or none if no changed or initial
}

function MyComponent (props) {
  const targetRef = useRef(null);
  useChangeVisibility({ targetRef, onVisibilityChange });

  return (
    <div ref={targetRef}>...content goes here...</div>
  );
}