Tauri dialog instead of window.confirm

[Background]
I used window.confirm to confirm actions before calling backend processes. But, Tauri’s dialog are also available,so I tried to use it.

[Conclusion]
window.confirm has minimal customization.
But Tauri’s dialog has various customizations.
This could be useful when you don't need many customization just like MUI.

Before

typescript

import { invoke } from "@tauri-apps/api/tauri";

const executeCommands = () => {
    invoke<string>("command");
};

...

const handleCommand = async () => {
    const Confirm = await window.confirm("Do you want to execute the hello command?");
    if (Confirm) {
        executeCommands();
    }
};

...

return (
  <div>
      <button onClick={handleCommand}>Execute</button>
  </div>
);

After

typescript

import { invoke } from "@tauri-apps/api/tauri";
import { dialog } from "@tauri-apps/api";

const executeCommands = () => {
    invoke<string>("command");
};

...

const handleCommand = async () => {
    const Confirm = await dialog.ask("Do you want to execute the hello command?", "Ask Dialog");
    if (Confirm) {
        // yes
        executeCommands();
    }
};

...

return (
  <div>
      <button onClick={handleCommand}>Execute</button>
  </div>
);

In tauri.conf.json

json

{
  "tauri": {
    "allowlist": {
      "all": false,
      "dialog": {
        "confirm": true,
        "open": true,
        "ask": true
      }
    }
  }
}

Blog

Tauri dialog instead of window.confirm

ke na

Join Our Newsletter. No Spam, Only the good stuff.

Related