tauri_react_typescript_app_invoking_rust_greet_command.ts

1import { useState } from "react";
2import reactLogo from "./assets/react.svg";
3import { invoke } from "@tauri-apps/api/tauri";
4import "./App.css";
5
6function App() {
7  const [greetMsg, setGreetMsg] = useState("");
8  const [name, setName] = useState("");
9
10  async function greet() {
11    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
12    setGreetMsg(await invoke("greet", { name }));
13  }
14
15  return (
16    <div className="container">
17      <h1>Welcome to Tauri!</h1>
18
19      <div className="row">
20        <a href="https://vitejs.dev" target="_blank">
21          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
22        </a>
23        <a href="https://tauri.app" target="_blank">
24          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
25        </a>
26        <a href="https://reactjs.org" target="_blank">
27          <img src={reactLogo} className="logo react" alt="React logo" />
28        </a>
29      </div>
30
31      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
32
33      <form
34        className="row"
35        onSubmit={(e) => {
36          e.preventDefault();
37          greet();
38        }}
39      >
40        <input
41          id="greet-input"
42          onChange={(e) => setName(e.currentTarget.value)}
43          placeholder="Enter a name..."
44        />
45        <button type="submit">Greet</button>
46      </form>
47
48      <p>{greetMsg}</p>
49    </div>
50  );
51}
52
53export default App;