Cancel drag with escape key using useDragDropManager?

[stevenkkim]

I'm using the touch backend because the html5 backend has ugly cursors which cannot be changed (see: #325) and I'm trying to use the escape key to cancel a drag operation (which was discussed here but never resolved: #600).

I just discovered useDragDropManager but the documentation is a bit sparse (https://react-dnd.github.io/react-dnd/docs/api/use-drag-drop-manager)

Would useDragDropManager be an appropriate way to implement this? Here is my code, which is a component with a mousetrap listener for the escape key that calls dndManager.getActions().endDrag() .

import { useDragDropManager } from 'react-dnd';
import { useMousetrap } from '../components/shortcuts/useMousetrap';

export function EscapeToCancelDrag() {
  const dndManager = useDragDropManager()
  useMousetrap('esc', () => {
    if (dndManager.getMonitor().isDragging()) {
      dndManager.getActions().endDrag();
    }
  });
  return null;
}

It seems to work, but not sure whether this is an appropriate use of useDragDropManager, if there are problems/risks/drawbacks to this approach, or if there are simply better ways to do this. Feedback is appreciated. Thanks!