react

@nativewindow/react

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.tsimport{z}from"zod";import{createChannelHooks}from"@nativewindow/react";exportconst{ 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";functionApp(){return(<ChannelProvider><Counter/></ChannelProvider>);}

Hooks

import{useChannelEvent,useSend}from"./channel";functionCounter(){const[count,setCount]=useState(0);constsend=useSend();// Subscribe to host events with automatic cleanupuseChannelEvent("update-title",(title)=>{document.title=title;});// Send client events to the hostreturn<buttononClick={()=>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