useTauriEvent hook

Define custom events and handlers for Tauri events in React.

Tauri is a Rust - JS framework for building custom desktop and mobile apps using a Rust backend with a JS frontend.

Events in Tauri work as they do in the dom, or electron. Rust can emit events from the backend to the frontend, and you can handle them with this custom hook.

Usage

1import { useTauriEvent } from "@util-hooks/use-tauri-event";
2import { invoke } from "@tauri-apps/api";
3
4const App = () => {
5  const onClick = () => {
6    // Invoke a method that will emit the event from the backend
7    invoke("ping");
8  };
9
10  useTauriEvent<string>("pong", msg => {
11    console.log("pong!");
12  });
13
14  return <button onClick={onClick}>Click to emit event!</button>;
15};

Or you can pass any state variable to update the event when the state changes, as you would do in a useEffect hook.

1import { useTauriEvent } from "@util-hooks/use-tauri-event";
2import { invoke } from "@tauri-apps/api";
3import { useState } from "react";
4
5const App = () => {
6  const [count, setCount] = useState<number>(0);
7
8  const onClick = () => {
9    // Invoke a method that will emit the event from the backend
10    invoke("ping");
11  };
12
13  useTauriEvent<string>(
14    "pong",
15    msg => {
16      console.log("pong!");
17    },
18    [count]
19  );
20
21  return <button onClick={onClick}>Click to emit event!</button>;
22};

Custom type map

This package provides a builder method to create a custom useTauriEvent hook, that will follow the types that you pass it whiile building it.

• First, you have to define the custom type map like this:

1type CustomEventMap = {
2  ping: { pongMessage: string };
3  calcSize: number;
4  // ...
5};

• Then you can build the hook with the buildMappedTauriEventHook:

1import { buildMappedTauriEventHook } from "@util-hooks";
2
3// You can choose a shorter name :)
4const useCustomTauriHook = buildMappedTauriHook<CustomEventMap>();
5
6const App = () => {
7  // Here, "ping" and "calcSize" will be inferred, and the payload will have the value from the custom map
8  useCustomTauriHook(
9    "ping",
10    payload => {
11      // This will be valid
12      console.log(payload.pongMessage); // => pong!
13    },
14    [
15      /* you can still define state variables */
16    ]
17  );
18
19  return <div>Hello, world!</div>;
20};

Thanks

the tsup and the tauri teams, for making awesome Projects

License

MIT License © Saverio Scagnoli 2024.