How to change cursor on draggable component

[syllith]

When I have a draggable component, it puts a 4-way arrow cursor over that div, but I don't want that to happen. How can I disable this? I've checked the docs for reactablejs and interactjs, but cannot figure out how to do it. Could I get some help?

[beizhedenglong]

@syllith There is a way to change the cursor style by using cursorChecker api:

const DraggableOptionsDemo = () => {
  const [coordinate, setCoordinate] = React.useState({ x: 0, y: 0 })
  return (
    <Reactable
      draggable={{
        cursorChecker: () => "pointer",
        onstart: action("DragStart"),
        onmove: (event) => setCoordinate(prev => ({
          x: prev.x + event.dx,
          y: prev.y + event.dy
        })),
        onend: action("DragEnd"),
      }}
      {...coordinate}
    />
  )
}

you can check the details at https://interactjs.io/docs/action-options/

[syllith]

Ah, so that's how you do it. Thank you very much!