How to change operating system cursor with electron

user_9130688 0
Viewed 85

Is it possible to change the operating system cursor with Electronjs?

When I use startDrag, for example, the cursor in macOS is the same as html drag; I wish to change that cursor to a custom one.

electron
1 Answers

provide an icon

If you're talking about the event.sender.startDrag method that exists on incoming IPC messages in the main thread, then you can provide an icon property to that method's argument, like so:

event.sender.startDrag({
  file: absPathToFileBeingDragged,
  icon: DROP_ICON_PATH
})

Note that the Electron docs for startDrag say MacOS requires that you provide an icon. The docs also say icon can be a path to an image or an instance of NativeImage (which I assume means you can generate a bitmap in RAM and pass its handle without writing that bitmap to disk first).

In context, this might look like:

const DROP_ICON_PATH = Path.join(__dirname, 'custom-drag-out-icon.png')

ipcMain.on('drag-file-out-of-app', ( event, ...dataFromCaller ) => {
  // ...do some work to locate or create the file the user will be dragging
  
  event.sender.startDrag({
    file: absPathOfFileToBeDragged,
    icon: DROP_ICON_PATH
  })
})

The above code is lightly modified for clarity from the tutorial on this page.

user_8144630
Related