How to use mouseEnter and mouseLeave with this helper function

[TaiwoJazz]

const ctx = useRef();

// Event Handler
const clickEventHandler = () => {
  ctx.current.onClick();
};

useLayoutEffect(() => {
  ctx.current = gsap.context((self) => {
    // use any arbitrary string as a name; it'll be added to the Context object, so in this case you can call onClick() later...
    self.add("onClick", (e) => {
      gsap.to(...); // <-- gets added to the Context!
    });

  }, myRef);
  
  return () => ctx.current.revert();
}, []);

Turns out that this helper function will do the trick i've been struggling to work around but i need it to be mouseEnter and mouseLeave... and i also want to loop through the items i'm hovering over... Thanks in advance...

[Rodrigo]

Hi,

 

Is really hard to see what could be the issue without a minimal demo, so if you could provide one it would be great.

 

The only advice I can offer in based on the snippet you provided is to use React's events handler and just execute the method you stored in the context, something like this:

const ctx = useRef();

// Event Handler
const mouseEnterHandler = () => {
  ctx.current.onMouseEnter();
};

useLayoutEffect(() => {
  ctx.current = gsap.context((self) => {
    // use any arbitrary string as a name; it'll be added to the Context object, so in this case you can call onClick() later...
    self.add("onMouseEnter", (e) => {
      gsap.to(...); // <-- gets added to the Context!
    });

  }, myRef);
  
  return () => ctx.current.revert();
}, []);

return (
  <div>
    {myElements.map((element) =>
      <div key={element.id} onMouseEnter={mouseEnterHandler}>{element.content}</div>
    )}
  </div>
);

Happy Tweening!