TypeScript: useDrag & @react-three/fiber: Types of property 'onClick' are incompatible. MouseEventHandler vs ThreeEvent

[timoxley]

useDrag seems to work fine with @react-three/fiber components, but TypeScript complains about the handlers being attached by {...bind()}.

e.g.

  const bind = useDrag<ThreeEvent<MouseEvent>>(() => {})
  return <mesh {...bind()} />

 Types of property 'onClick' are incompatible.
    Type 'MouseEventHandler<EventTarget> | undefined' is not assignable to type '((event: ThreeEvent<MouseEvent>) => void) | undefined'.
      Type 'MouseEventHandler<EventTarget>' is not assignable to type '(event: ThreeEvent<MouseEvent>) => void'.
        Types of parameters 'event' and 'event' are incompatible.
          Type 'MouseEvent & IntesectionEvent<MouseEvent>' is missing the following properties from type 'MouseEvent<EventTarget, MouseEvent>': isDefaultPrevented, isPropagationStopped, persist

Sandbox

https://codesandbox.io/s/fervent-blackburn-3p8db?file=/src/index.tsx

Information:

• React Use Gesture version: [e.g. v10.1.1]

Checklist:

• [x] I've read the documentation.

[dbismut]

Please see: https://github.com/pmndrs/use-gesture/discussions/287

There's no easy fix except from making bind() typings looser.

[timoxley]

@dbismut Thanks David. Apologies for the duplicate.

I'm not sure how to solve this unless I create a package such as @use-gesture/r3f with proper types.

Yeah this was the solution I was thinking might be needed. Perhaps such a package would open the door to adding more specialised interfaces for THREE e.g.

• bounds could take a Box3 | React.RefObject<Box3> as an analogue for HTMLElement | React.RefObject<HTMLElement>
• axis take a Vec3
• offset/movement could be automatically translated into world coordinates.
• offset/movement could be calculated based on distance along a plane (axis) at the ray intersection point.
• etc

Suggesting these things specifically because they're the useDrag features I had to reimplement when I converted my current project UI elements from using/abusing DOM+CSS transforms to r3f.

[dbismut]

I agree but I don't use r3f enough to know how to implement those. That would probably mean adding also another core package for DOM related packages.

[yoosif0]

any updates?

[rogersanick]

Also having this issue