@fcannizzaro/native-window-ipc-react

[!WARNING] This project is in alpha. APIs may change without notice.

React hooks for native-window-ipc. Provides type-safe React bindings for the webview side of the IPC channel.

Install

bun add @fcannizzaro/native-window-ipc-react

Peer Dependencies

• react ^18.0.0 || ^19.0.0
• @fcannizzaro/native-window-ipc

Usage

Factory approach (recommended)

Create pre-typed hooks from your schemas:

// channel.ts
import { z } from "zod";
import { createChannelHooks } from "@fcannizzaro/native-window-ipc-react";

export const { ChannelProvider, useChannel, useChannelEvent, useSend } = createChannelHooks({
  schemas: {
    counter: z.number(),
    "update-title": z.string(),
  },
});

Provider setup

Wrap your app with ChannelProvider:

import { ChannelProvider } from "./channel";

function App() {
  return (
    <ChannelProvider>
      <Counter />
    </ChannelProvider>
  );
}

Hooks

import { useChannelEvent, useSend } from "./channel";

function Counter() {
  const [count, setCount] = useState(0);
  const send = useSend();

  // Subscribe to events with automatic cleanup
  useChannelEvent("counter", (n) => {
    setCount(n);
  });

  return <button onClick={() => send("counter", count + 1)}>Count: {count}</button>;
}

API

createChannelHooks(options)

Factory that returns pre-typed { ChannelProvider, useChannel, useChannelEvent, useSend }. Each call creates its own React context, supporting multiple independent channels.

ChannelProvider

React component that creates a createChannelClient instance and provides it via context.

useChannel()

Access the typed channel from context. Throws if used outside ChannelProvider.

useChannelEvent(type, handler)

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.

useSend()

Returns a stable send function (memoized via useCallback).

Documentation

Full documentation at native.fcannizzaro.com

License

MIT