@inkly/react

Official React bindings for inkly. The package is a thin typed wrapper around one @inkly/client instance: hooks subscribe to client lifecycle, events, actions, and streams without adding protocol behavior.

Install

pnpm add @inkly/react @inkly/client @inkly/protocol react

Quickstart

import { createReactClient } from "@inkly/react";
import { chat } from "./shared/contract";

export const inkly = createReactClient(chat, { url: "wss://api.example.com/ws" });

function Room() {
  const status = inkly.useStatus();
  const send = inkly.useAction("sendMessage");

  inkly.useEvent("message", (message) => console.log(message));

  return <button disabled={send.isPending || status !== "open"} onClick={() => void send.mutate({ text: "hi" })}>Send</button>;
}

API

• createReactClient(contract, options) creates an inkly client and returns typed bindings.
• createInklyReact(client) wraps an existing client and returns { InklyProvider, useClient, useStatus, useAction, useEvent, useStream }.
• useStatus() uses React useSyncExternalStore and updates on client.onStatus.
• useAction(name) returns { call, mutate, data, error, isPending }.
• useEvent(name, handler) subscribes with client.on and unsubscribes on unmount.
• useStream(name, input, options?) consumes client.streams[name](input), accumulates items, exposes status/error/cancel, and cancels on unmount.

Cleanup guarantee

Every event and stream hook returns cleanup to React effects. Unmounting a component removes event listeners and calls stream cancel() so server subscriptions are not leaked.