Draggable + React

[SteveS]

Is there any way to easily access React state from inside a draggable instance? Not even storing values in refs lets me access and update them.

I've managed some workarounds with external state managers, but it takes an insane amount of work. I'm hoping I'm missing something simple.

[SteveS]

I am attempting a solution where I manually update the draggable instance "vars" in an effect that is tracking the state I want to sync. It might work but it still isn't pretty.

[Rodrigo]

Hi,

 

I assume that the React state update is changing the DOM in some fashion that you need to reflect after in your Draggable instance.

 

Is a bit hard to debug without a minimal demo, so the only advice I can give you is to store your Draggable instance in a ref and then run the update method in a useEffect hook in order to update the Draggable instance. Something like this:

const [property, setProperty] = useState();
const myDraggable = useRef();

useEffect(() => {
  const ctx = gsap.context(() => {
    myDraggable.current = Draggable.create(".box", {
      type: "x, y",
    });
  });
  return () => ctx.revert();
}, []);

useEffect(() => {
  myDraggable.current[0].update()
}, [property]);

Here you can read more about the update method:

https://greensock.com/docs/v3/Plugins/Draggable/update()

 

If you keep having issues, please include a demo so we can take a better look at what the issue could be.

 

Happy Tweening!