import {useEffect, useRef} from "react";

/**
 * An element that always scrolls into view when it is rendered. When added to a list, the entire list will scroll to show this element.
 */
export default function ScrollIntoView() {
  const elementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (elementRef.current) elementRef.current.scrollIntoView({ behavior: "smooth" });
  });

  return <div ref={elementRef} />;
}