In useDrag callback function, how to get access to the element which triggered the useDrag

[Just-Moh-it]

I'm making a wysiwyg image editor using html components. When users add images, a border appears on the images. Also, resize handler appear on the sides like this:

I've allotted the same ref to each resize corner, namely resizerRef like this:

...

const resizeRef = React.useRef<HTMLDivElement | null>(null);

useDrag((event, offset: [ox, oy]) => {
    // Logic to change height/width of image element based on offset
    ...

    const side = event.currentTarget.dataset // returns typ-error and doesn't exist
}, {ref: resizeRef});

return (
    <div ref={resizeRef} data-side="top-left" className="styles...">
    <div ref={resizeRef} data-side="top-right" className="styles...">
    <div ref={resizeRef} data-side="bottom-left" className="styles...">
    <div ref={resizeRef} data-side="bottom-right" className="styles...">
)

...

In the useDrag function's first argument (the callback function), I have access to event. However, neither the event.target nor the event.currentTarget could get me access to the data-side argument. How do I access it?

(What I've considered)

I know that one ref should only be used with one element, and I shouldn't assign the resizeRef to multiple divs. However, I'm still in the prototyping phase, and don't want to do the copy-pasta required after making separate refs.

Any suggestions would be appreciated 😃

[dbismut]

The element that triggered useDrag is event.currentTarget.
You definitely shouldn't assign a ref to several elements, prototyping or not prototyping.

You should either do this:

useDrag(({ arg: [side] }) => {
  switch(side) {
    case 'top-left':
    case 'top-right':
    ...
  }
})

<div {...bind('top-left')} />
<div {...bind('top-right')} />

or

const Handle = ({ side }) => {
  const ref = useRef()
  useDrag(() => {
    switch(side) {
      case 'top-left':
      case 'top-right':
      ...
    }
  }, { target: ref })
}

  return <div ref={ref} />
}

const App = () => {
  return <>
    <Handle side="top-left" />
    <Handle side="top-right" />
  </>
}