CODEWITHSUNDEEP
reactjsreact-hooks
MrVoland
MrVoland

Reputation: 283

Modal trigger - mouse position

I have a question about React. How can I trigger a certain function in the useEffect hook, depending on the position of the cursor?

I need to trigger a function that will open a popup in two cases - one thing is to open a modal after a certain time (which I succeeded with a timeout method), but the other case is to trigger the modal opening function once the mouse is at the very top of the website right in the middle. Thanks for the help.

For now I have that, but I'm struggling with the mouse position part:

function App(e) {
  const [modalOpened, setModalOpened] = useState(false);
  console.log(e)

  useEffect(() => {
    const timeout = setTimeout(() => {
      setModalOpened(true);
    }, 30000);

    return () => clearTimeout(timeout);
  }, []);

  const handleCloseModal = () => setModalOpened(false);

Upvotes: 0

Views: 2906

Answers (1)

Clayton Ingalls
Clayton Ingalls

Reputation: 131

You could use a custom hook that checks the conditions you want.

I'm sure this could be cleaner, but this hook works.

export const useMouseTopCenter = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isTopCenter, setIsTopCenter] = useState(false);
  const width = window.innerWidth;

  // Tracks mouse position
  useEffect(() => {
    const setFromEvent = (e) => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", setFromEvent);

    return () => {
      window.removeEventListener("mousemove", setFromEvent);
    };
  }, []);

  // Tracks whether mouse position is in the top 100px and middle third of the screen.
  useEffect(() => {
    const centerLeft = width / 3;
    const centerRight = (width / 3) * 2;
    if (
      position.x > centerLeft &&
      position.x < centerRight &&
      position.y < 100
    ) {
      setIsTopCenter(true);
    } else {
      setIsTopCenter(false);
    }
  }, [position, width]);

  return isTopCenter;
};

Then you would simply add const isCenterTop = useMouseTopCenter(); to your app component.

Checkout this code sandbox, which is just a variation of this custom hook.

Upvotes: 3

Related Questions