useHovered

Detects when the cursor is hovering the container.

Usage

useHovered detects when the cursor is hovering the container and returns the hovered state. It uses events on mouseenter and mouseleave to detect the hovering.

It has a skip option in case the hovering is not required.

import { useHovered } from "swash/utils/useHovered";

function Example({ skip }) {
  const [containerRefHandler, hovered, containerRef] = useHovered({
    skip,
  });

  useEffect(() => {
    // ...
  }, [hovered]);

  useEffect(() => {
    // In case you have to use the container ref for additional effects
    if (containerRef.current) containerRef.current.focus();
  }, [containerRef]);

  return (
    <>
      <div ref={containerRefHandler}>...</div>
      {hovered && <AnotherComponent />}
    </>
  );
}