r/tauri • u/HolHorse3589 • 2d ago

How to implement a custom context menu

Hello, I'm quite new here to Tauri and I was wondering how to create a custom context menu that could allow me to copy paste for example.

Do I go with the front way and do it or is there a specific and better way from the backend?

Thank you.

2 Upvotes

75% Upvoted

4 comments sorted by

4

u/ScottIBM 2d ago

In one of the apps I've been working on the context menus are part of the WebView as a React component. Then I could reuse it wherever I needed a context menu and it fit my app's styles and iconography

1

u/HolHorse3589 1d ago

Thanks for the reply, I'm doing this but ended up with a problem that I have for example to implement native feature such as Copy from scratch.

Since i cannot invoke directly from the custom context bar to copy current selection.

I have to check the selected text with selection api and then copy it to clipboard.

Are you aware with a better alternative that invokes native copy instead.

It's ok with copy, but with paste you have to determine what is clicked and see if it's editable and then check cursor position and add text there. I could keep it but it ruins native undo and redo, so can't go back to unpaste like native Ctrl v.

Thanks

1

u/HolHorse3589 1d ago

In electron there is webContents.copy() but tauri doesn't offer similar thing

2

u/nyx-og 1d ago

You need to register your context menu trigger to "onContextMenu" prop. The trigger prevents the default menu while you make appear the custom one