Skip to content

Latest commit

 

History

History

README.md

@nativewindow/react

npm

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.

Install

bun add @nativewindow/react
# or
deno add npm:@nativewindow/react

Peer Dependencies

  • react ^18.0.0 || ^19.0.0
  • @nativewindow/ipc

Usage

Factory approach (recommended)

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(),
  },
});

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 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>;
}

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 nativewindow.fcannizzaro.com

License

MIT