DragControls feature proposition

[ikteru]

Is it possible to create a DragControls component that has event listeners as props the same way a mesh does in React-Three-Fiver:

<mesh
  onClick={(e) => console.log('click')}
  onContextMenu={(e) => console.log('context menu')}
  onDoubleClick={(e) => console.log('double click')}
  onWheel={(e) => console.log('wheel spins')}
  onPointerUp={(e) => console.log('up')}
  onPointerDown={(e) => console.log('down')}
  onPointerOver={(e) => console.log('over')}
  onPointerOut={(e) => console.log('out')}
  onPointerEnter={(e) => console.log('enter')} // see note 1
  onPointerLeave={(e) => console.log('leave')} // see note 1
  onPointerMove={(e) => console.log('move')}
  onPointerMissed={() => console.log('missed')}
  onUpdate={(self) => console.log('props have been updated')}
/>

Except, instead of being able to pass a callback to events like onClick, we pass them to the DragControls triggered events:

dragstart
drag
dragend
hoveron
hoveroff

So, it becomes something like:

<DragControls 
        objects=[ ... someObjects ] 
        camera={someCamera} 
        domElement={someContainer} 
        onHoverOn={ () => console.log("hovering") }
/>

[gsimone]

Could you make a sandbox of this proposal? I'm not sure I understand your intent

[ikteru]

I just want to use DragControls with React Three Fiber in a streamlined way. The suggestion above is one example. An other example would be some kind of hook like how it's done in React UseGesture. I want to be able to somehow exploit the events that DragControls dispatches. React UseGesture for example give you access to event using useDrag or useHover. That's a great of doing it for example. ( It's hard to make a sandbox of something that isn't created yet ! )

[github-actions[bot]]

:tada: This issue has been resolved in version 9.99.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: