[FIXED] How to use the code above in React js using hooks

Issue

document.getElementById("cards").onmousemove = e => {
  for(const card of document.getElementsByClassName("card")) {
    const rect = card.getBoundingClientRect(),
          x = e.clientX - rect.left,
          y = e.clientY - rect.top;

    card.style.setProperty("--mouse-x", `${x}px`);
    card.style.setProperty("--mouse-y", `${y}px`);
  };
}

I actually don't know how to use the above code in react js. so, if anyone knows please respond!

full source code link:

https://codepen.io/Hyperplexed/pen/MWQeYLW

Solution

to use Hook you need to handle with reference of element like this

  const CardRef = React.useRef(null);
  useShadow(CardRef);

  return <div ref={CardRef} className="card"  ></div>

And the hook would be something like this

import { useEffect } from 'react';

const useShadow = (reference: React.MutableRefObject<any>) => {
  useEffect(() => {
    const eventReference = (e) => {
      const rect = reference.current.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

      reference.current.style.setProperty('--mouse-x', `${x}px`);
      reference.current.style.setProperty('--mouse-y', `${y}px`);
    };

    if (reference.current) {
      const { current } = reference;
      current.addEventListener('mousemove', eventReference);
    }
    return () => {
      reference.current &&
        reference.current.removeEventListener('mousemove', eventReference);
    };
  }, [reference]);
};

export default useShadow;

Answered By - Black Hole
Answer Checked By - - David Goodson (ReactFix Volunteer)