Note
This project is in beta. APIs may change without notice.
React hooks for native-window-ipc. Provides type-safe React bindings for the webview side of the IPC channel.
bun add @nativewindow/react
# or
deno add npm:@nativewindow/reactreact^18.0.0 || ^19.0.0@nativewindow/ipc
Create pre-typed hooks from your schemas:
// channel.ts
import { z } from "zod";
import { createChannelHooks } from "@nativewindow/react";
export const { ChannelProvider, useChannel, useChannelEvent, useSend } = createChannelHooks({
host: {
"update-title": z.string(),
},
client: {
counter: z.number(),
},
});Wrap your app with ChannelProvider:
import { ChannelProvider } from "./channel";
function App() {
return (
<ChannelProvider>
<Counter />
</ChannelProvider>
);
}import { useChannelEvent, useSend } from "./channel";
function Counter() {
const [count, setCount] = useState(0);
const send = useSend();
// Subscribe to host events with automatic cleanup
useChannelEvent("update-title", (title) => {
document.title = title;
});
// Send client events to the host
return <button onClick={() => send("counter", count + 1)}>Count: {count}</button>;
}Factory that returns pre-typed { ChannelProvider, useChannel, useChannelEvent, useSend }. Each call creates its own React context, supporting multiple independent channels.
React component that creates a createChannelClient instance and provides it via context.
Access the typed channel from context. Throws if used outside ChannelProvider.
Subscribe to a specific IPC event type. Automatically cleans up on unmount. Handler is stored in a ref to avoid re-subscriptions on handler identity changes.
Returns a stable send function (memoized via useCallback).
Full documentation at nativewindow.fcannizzaro.com
MIT