components ScrollIntoView.tsx

0% Statements 0/5

0% Branches 0/2

0% Functions 0/2

0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import {useEffect, useRef} from "react";
 
/**
 * A React component that automatically scrolls itself into view whenever rendered.
 *
 * This component is especially useful in scrollable containers to keep the most
 * recent content visible (e.g., chat applications, live logs, or notifications).
 *
 * It uses the browser's `Element.scrollIntoView()` API with smooth scrolling behavior.
 *
 * @returns A `<div>` element that scrolls into view when mounted or updated.
 */
export default function ScrollIntoView() {
  /** Ref to the DOM element that will be scrolled into view. */
  const elementRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    if (elementRef.current) elementRef.current.scrollIntoView({ behavior: "smooth" });
  });
 
  return <div ref={elementRef} />;
}