Mouse Events

gistfile1.txt

import { useEffect, useState } from 'react';

const useMouseEvents = () => {
  const [overlayStyles, setOverlayStyles] = useState<React.CSSProperties>({
    display: 'none',
    position: 'fixed',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    padding: '10px',
    border: '1px solid black',
    zIndex: 9999,
  });

  const [overlayContent, setOverlayContent] = useState<string>('');

  useEffect(() => {
    const handleMouseEnter = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      const { padding, margin } = window.getComputedStyle(target);

      setOverlayStyles(prevStyles => ({
        ...prevStyles,
        display: 'block',
        top: `${target.offsetTop}px`,
        left: `${target.offsetLeft}px`,
      }));

      setOverlayContent(`
        Padding: ${padding}
        Margin: ${margin}
      `);
    };

    const handleMouseLeave = () => {
      setOverlayStyles(prevStyles => ({
        ...prevStyles,
        display: 'none',
      }));
    };

    const elements = document.querySelectorAll('*');

    elements.forEach(element => {
      element.addEventListener('mouseenter', handleMouseEnter);
      element.addEventListener('mouseleave', handleMouseLeave);
    });

    return () => {
      elements.forEach(element => {
        element.removeEventListener('mouseenter', handleMouseEnter);
        element.removeEventListener('mouseleave', handleMouseLeave);
      });
    };
  }, []); // Run effect only once on component mount

  return { overlayStyles, overlayContent };
};

export default useMouseEvents;