[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
}
}
}
}
Top comments (0)