peerserver-client-react 1.0.0

package/README.md

@@ -0,0 +1,75 @@
+# peerserver-client-react
+
+React hooks for [peerserver-client](https://www.npmjs.com/package/peerserver-client).
+
+## Install
+
+```bash
+npm install peerserver-client peerserver-client-react
+```
+
+## Setup
+
+```tsx
+import { PeerProvider } from 'peerserver-client-react';
+
+function App() {
+  return (
+    <PeerProvider config={{ url: 'wss://your-server.com/ws', alias: 'myuser' }}>
+      <Chat />
+    </PeerProvider>
+  );
+}
+```
+
+## Hooks
+
+### `usePeerClient()`
+
+```tsx
+const { connected, fingerprint, alias, error, reconnecting, broadcast, relay } = usePeerClient();
+```
+
+### `useNamespace(namespace, appType?, version?)`
+
+```tsx
+const { peers, joined, discover } = useNamespace('chat', 'chat', '1.0');
+// peers: PeerInfo[] — auto-updates on join/leave
+```
+
+### `usePeer(fingerprint)`
+
+```tsx
+const { connected, messages, streams, send, addStream, close } = usePeer(targetFingerprint);
+send({ msg: 'hello' });
+```
+
+### `useMatch(namespace)`
+
+```tsx
+const { match, result, matching, connectToMatch } = useMatch('tictactoe');
+await match({ skill: 'beginner' });
+const peer = connectToMatch(); // connects to first matched peer
+```
+
+### `useBroadcast(namespace)`
+
+```tsx
+const { messages, send } = useBroadcast('whiteboard');
+send({ tool: 'pen', x: 100, y: 200 });
+```
+
+### `useRelay()`
+
+```tsx
+const { messages, send } = useRelay();
+send(targetFingerprint, { text: 'hello' });
+```
+
+### `useMediaStream()`
+
+```tsx
+const { localStream, start, stop, attachToPeer, toggleAudio, toggleVideo } = useMediaStream();
+await start({ video: true, audio: true });
+attachToPeer(peer);
+```

package/dist/index.d.mts

@@ -0,0 +1,99 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import * as peerserver_client from 'peerserver-client';
+import { ClientConfig, PeerClient, PeerInfo, DataChannelConfig, Peer, MatchResult } from 'peerserver-client';
+
+interface PeerContextValue {
+    client: PeerClient | null;
+    connected: boolean;
+    fingerprint: string;
+    alias: string;
+    error: Error | null;
+    reconnecting: boolean;
+}
+declare function PeerProvider({ config, children, autoConnect, }: {
+    config: ClientConfig;
+    children: ReactNode;
+    autoConnect?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function usePeerContext(): PeerContextValue;
+
+declare function usePeerClient(): {
+    client: peerserver_client.PeerClient | null;
+    connected: boolean;
+    fingerprint: string;
+    alias: string;
+    error: Error | null;
+    reconnecting: boolean;
+    relay: (to: string, payload: any) => void | undefined;
+    broadcast: (namespace: string, data: any) => void | undefined;
+    updateMetadata: (meta: Record<string, any>) => void | undefined;
+    disconnect: () => void | undefined;
+};
+
+declare function useNamespace(namespace: string, appType?: string, version?: string): {
+    peers: PeerInfo[];
+    joined: boolean;
+    discover: (limit?: number) => Promise<PeerInfo[]>;
+};
+
+declare function usePeer(fingerprint: string | null, options?: {
+    alias?: string;
+    autoConnect?: boolean;
+    channelConfig?: DataChannelConfig;
+}): {
+    peer: Peer | null;
+    connectionState: string;
+    connected: boolean;
+    messages: any[];
+    streams: MediaStream[];
+    send: (data: any, channel?: string) => void;
+    addStream: (stream: MediaStream) => void;
+    removeStream: (stream: MediaStream) => void;
+    close: () => void;
+    clearMessages: () => void;
+};
+
+declare function useMatch(namespace: string): {
+    match: (criteria?: Record<string, any>) => Promise<MatchResult | undefined>;
+    result: MatchResult | null;
+    matching: boolean;
+    error: Error | null;
+    connectToMatch: (index?: number) => peerserver_client.Peer | null;
+};
+
+interface BroadcastMessage {
+    from: string;
+    namespace: string;
+    data: any;
+    ts: number;
+}
+declare function useBroadcast(namespace: string, maxHistory?: number): {
+    messages: BroadcastMessage[];
+    send: (data: any) => void;
+    clear: () => void;
+};
+
+interface RelayMessage {
+    from: string;
+    data: any;
+    ts: number;
+}
+declare function useRelay(maxHistory?: number): {
+    messages: RelayMessage[];
+    send: (to: string, data: any) => void;
+    clear: () => void;
+};
+
+declare function useMediaStream(): {
+    localStream: MediaStream | null;
+    error: Error | null;
+    start: (constraints?: MediaStreamConstraints) => Promise<MediaStream | null>;
+    stop: () => void;
+    attachToPeer: (peer: Peer) => void;
+    detachFromPeer: (peer: Peer) => void;
+    toggleAudio: (enabled?: boolean) => void;
+    toggleVideo: (enabled?: boolean) => void;
+};
+
+export { PeerProvider, useBroadcast, useMatch, useMediaStream, useNamespace, usePeer, usePeerClient, usePeerContext, useRelay };

package/dist/index.d.ts

@@ -0,0 +1,99 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import * as peerserver_client from 'peerserver-client';
+import { ClientConfig, PeerClient, PeerInfo, DataChannelConfig, Peer, MatchResult } from 'peerserver-client';
+
+interface PeerContextValue {
+    client: PeerClient | null;
+    connected: boolean;
+    fingerprint: string;
+    alias: string;
+    error: Error | null;
+    reconnecting: boolean;
+}
+declare function PeerProvider({ config, children, autoConnect, }: {
+    config: ClientConfig;
+    children: ReactNode;
+    autoConnect?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function usePeerContext(): PeerContextValue;
+
+declare function usePeerClient(): {
+    client: peerserver_client.PeerClient | null;
+    connected: boolean;
+    fingerprint: string;
+    alias: string;
+    error: Error | null;
+    reconnecting: boolean;
+    relay: (to: string, payload: any) => void | undefined;
+    broadcast: (namespace: string, data: any) => void | undefined;
+    updateMetadata: (meta: Record<string, any>) => void | undefined;
+    disconnect: () => void | undefined;
+};
+
+declare function useNamespace(namespace: string, appType?: string, version?: string): {
+    peers: PeerInfo[];
+    joined: boolean;
+    discover: (limit?: number) => Promise<PeerInfo[]>;
+};
+
+declare function usePeer(fingerprint: string | null, options?: {
+    alias?: string;
+    autoConnect?: boolean;
+    channelConfig?: DataChannelConfig;
+}): {
+    peer: Peer | null;
+    connectionState: string;
+    connected: boolean;
+    messages: any[];
+    streams: MediaStream[];
+    send: (data: any, channel?: string) => void;
+    addStream: (stream: MediaStream) => void;
+    removeStream: (stream: MediaStream) => void;
+    close: () => void;
+    clearMessages: () => void;
+};
+
+declare function useMatch(namespace: string): {
+    match: (criteria?: Record<string, any>) => Promise<MatchResult | undefined>;
+    result: MatchResult | null;
+    matching: boolean;
+    error: Error | null;
+    connectToMatch: (index?: number) => peerserver_client.Peer | null;
+};
+
+interface BroadcastMessage {
+    from: string;
+    namespace: string;
+    data: any;
+    ts: number;
+}
+declare function useBroadcast(namespace: string, maxHistory?: number): {
+    messages: BroadcastMessage[];
+    send: (data: any) => void;
+    clear: () => void;
+};
+
+interface RelayMessage {
+    from: string;
+    data: any;
+    ts: number;
+}
+declare function useRelay(maxHistory?: number): {
+    messages: RelayMessage[];
+    send: (to: string, data: any) => void;
+    clear: () => void;
+};
+
+declare function useMediaStream(): {
+    localStream: MediaStream | null;
+    error: Error | null;
+    start: (constraints?: MediaStreamConstraints) => Promise<MediaStream | null>;
+    stop: () => void;
+    attachToPeer: (peer: Peer) => void;
+    detachFromPeer: (peer: Peer) => void;
+    toggleAudio: (enabled?: boolean) => void;
+    toggleVideo: (enabled?: boolean) => void;
+};
+
+export { PeerProvider, useBroadcast, useMatch, useMediaStream, useNamespace, usePeer, usePeerClient, usePeerContext, useRelay };

package/dist/index.js

@@ -0,0 +1,398 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PeerProvider: () => PeerProvider,
+  useBroadcast: () => useBroadcast,
+  useMatch: () => useMatch,
+  useMediaStream: () => useMediaStream,
+  useNamespace: () => useNamespace,
+  usePeer: () => usePeer,
+  usePeerClient: () => usePeerClient,
+  usePeerContext: () => usePeerContext,
+  useRelay: () => useRelay
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_peerserver_client = require("peerserver-client");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PeerContext = (0, import_react.createContext)({
+  client: null,
+  connected: false,
+  fingerprint: "",
+  alias: "",
+  error: null,
+  reconnecting: false
+});
+function PeerProvider({
+  config,
+  children,
+  autoConnect = true
+}) {
+  const clientRef = (0, import_react.useRef)(null);
+  const [connected, setConnected] = (0, import_react.useState)(false);
+  const [fingerprint, setFingerprint] = (0, import_react.useState)("");
+  const [alias, setAlias] = (0, import_react.useState)("");
+  const [error, setError] = (0, import_react.useState)(null);
+  const [reconnecting, setReconnecting] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const client = new import_peerserver_client.PeerClient(config);
+    clientRef.current = client;
+    client.on("registered", (fp, a) => {
+      setFingerprint(fp);
+      setAlias(a);
+      setConnected(true);
+      setReconnecting(false);
+      setError(null);
+    });
+    client.on("disconnected", () => {
+      setConnected(false);
+    });
+    client.on("reconnecting", () => {
+      setReconnecting(true);
+    });
+    client.on("reconnected", () => {
+      setReconnecting(false);
+      setConnected(true);
+    });
+    client.on("error", (err) => {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    });
+    if (autoConnect) {
+      client.connect().catch((e) => {
+        setError(e instanceof Error ? e : new Error(String(e)));
+      });
+    }
+    return () => {
+      client.disconnect();
+      clientRef.current = null;
+    };
+  }, [config.url]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PeerContext.Provider,
+    {
+      value: {
+        client: clientRef.current,
+        connected,
+        fingerprint,
+        alias,
+        error,
+        reconnecting
+      },
+      children
+    }
+  );
+}
+function usePeerContext() {
+  return (0, import_react.useContext)(PeerContext);
+}
+
+// src/use-peer-client.ts
+function usePeerClient() {
+  const ctx = usePeerContext();
+  return {
+    client: ctx.client,
+    connected: ctx.connected,
+    fingerprint: ctx.fingerprint,
+    alias: ctx.alias,
+    error: ctx.error,
+    reconnecting: ctx.reconnecting,
+    relay: (to, payload) => ctx.client?.relay(to, payload),
+    broadcast: (namespace, data) => ctx.client?.broadcast(namespace, data),
+    updateMetadata: (meta) => ctx.client?.updateMetadata(meta),
+    disconnect: () => ctx.client?.disconnect()
+  };
+}
+
+// src/use-namespace.ts
+var import_react2 = require("react");
+function useNamespace(namespace, appType, version) {
+  const { client, connected } = usePeerContext();
+  const [peers, setPeers] = (0, import_react2.useState)([]);
+  const [joined, setJoined] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!client || !connected || !namespace) return;
+    client.join(namespace, appType, version).then((list) => {
+      setPeers(list);
+      setJoined(true);
+    });
+    const offJoined = client.on("peer_joined", (info) => {
+      setPeers((prev) => {
+        if (prev.some((p) => p.fingerprint === info.fingerprint)) return prev;
+        return [...prev, info];
+      });
+    });
+    const offLeft = client.on("peer_left", (fp) => {
+      setPeers((prev) => prev.filter((p) => p.fingerprint !== fp));
+    });
+    return () => {
+      offJoined();
+      offLeft();
+      client.leave(namespace);
+      setJoined(false);
+      setPeers([]);
+    };
+  }, [client, connected, namespace]);
+  const discover = (0, import_react2.useCallback)(
+    (limit) => client?.discover(namespace, limit) ?? Promise.resolve([]),
+    [client, namespace]
+  );
+  return { peers, joined, discover };
+}
+
+// src/use-peer.ts
+var import_react3 = require("react");
+function usePeer(fingerprint, options) {
+  const { client } = usePeerContext();
+  const [peer, setPeer] = (0, import_react3.useState)(null);
+  const [connectionState, setConnectionState] = (0, import_react3.useState)("new");
+  const [messages, setMessages] = (0, import_react3.useState)([]);
+  const [streams, setStreams] = (0, import_react3.useState)([]);
+  const maxMessages = (0, import_react3.useRef)(100);
+  (0, import_react3.useEffect)(() => {
+    if (!client || !fingerprint) return;
+    const autoConnect = options?.autoConnect ?? true;
+    let p;
+    const existing = client.getPeer(fingerprint);
+    if (existing) {
+      p = existing;
+    } else if (autoConnect) {
+      p = client.connectToPeer(fingerprint, options?.alias ?? "", options?.channelConfig);
+    } else {
+      return;
+    }
+    setPeer(p);
+    setConnectionState(p.connectionState);
+    const offConnected = p.on("connected", () => setConnectionState("connected"));
+    const offDisconnected = p.on("disconnected", (state) => setConnectionState(state));
+    const offData = p.on("data", (data, channel) => {
+      setMessages((prev) => {
+        const next = [...prev, { data, channel, ts: Date.now() }];
+        return next.length > maxMessages.current ? next.slice(-maxMessages.current) : next;
+      });
+    });
+    const offStream = p.on("stream", (stream) => {
+      setStreams((prev) => [...prev, stream]);
+    });
+    return () => {
+      offConnected();
+      offDisconnected();
+      offData();
+      offStream();
+    };
+  }, [client, fingerprint]);
+  const send = (0, import_react3.useCallback)(
+    (data, channel) => {
+      peer?.send(data, channel);
+    },
+    [peer]
+  );
+  const addStream = (0, import_react3.useCallback)(
+    (stream) => {
+      peer?.addStream(stream);
+    },
+    [peer]
+  );
+  const removeStream = (0, import_react3.useCallback)(
+    (stream) => {
+      peer?.removeStream(stream);
+    },
+    [peer]
+  );
+  const close = (0, import_react3.useCallback)(() => {
+    if (fingerprint) client?.closePeer(fingerprint);
+    setPeer(null);
+    setConnectionState("closed");
+    setMessages([]);
+    setStreams([]);
+  }, [client, fingerprint]);
+  const clearMessages = (0, import_react3.useCallback)(() => setMessages([]), []);
+  return {
+    peer,
+    connectionState,
+    connected: connectionState === "connected",
+    messages,
+    streams,
+    send,
+    addStream,
+    removeStream,
+    close,
+    clearMessages
+  };
+}
+
+// src/use-match.ts
+var import_react4 = require("react");
+function useMatch(namespace) {
+  const { client } = usePeerContext();
+  const [result, setResult] = (0, import_react4.useState)(null);
+  const [matching, setMatching] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const match = (0, import_react4.useCallback)(
+    async (criteria) => {
+      if (!client) return;
+      setMatching(true);
+      setError(null);
+      try {
+        const res = await client.match(namespace, criteria);
+        setResult(res);
+        return res;
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+      } finally {
+        setMatching(false);
+      }
+    },
+    [client, namespace]
+  );
+  const connectToMatch = (0, import_react4.useCallback)(
+    (index = 0) => {
+      if (!client || !result) return null;
+      const target = result.peers[index];
+      if (!target) return null;
+      return client.connectToPeer(target.fingerprint, target.alias);
+    },
+    [client, result]
+  );
+  return { match, result, matching, error, connectToMatch };
+}
+
+// src/use-broadcast.ts
+var import_react5 = require("react");
+function useBroadcast(namespace, maxHistory = 100) {
+  const { client } = usePeerContext();
+  const [messages, setMessages] = (0, import_react5.useState)([]);
+  const maxRef = (0, import_react5.useRef)(maxHistory);
+  maxRef.current = maxHistory;
+  (0, import_react5.useEffect)(() => {
+    if (!client) return;
+    const off = client.on("broadcast", (from, ns, data) => {
+      if (ns !== namespace) return;
+      setMessages((prev) => {
+        const next = [...prev, { from, namespace: ns, data, ts: Date.now() }];
+        return next.length > maxRef.current ? next.slice(-maxRef.current) : next;
+      });
+    });
+    return off;
+  }, [client, namespace]);
+  const send = (0, import_react5.useCallback)(
+    (data) => {
+      client?.broadcast(namespace, data);
+    },
+    [client, namespace]
+  );
+  const clear = (0, import_react5.useCallback)(() => setMessages([]), []);
+  return { messages, send, clear };
+}
+
+// src/use-relay.ts
+var import_react6 = require("react");
+function useRelay(maxHistory = 100) {
+  const { client } = usePeerContext();
+  const [messages, setMessages] = (0, import_react6.useState)([]);
+  const maxRef = (0, import_react6.useRef)(maxHistory);
+  maxRef.current = maxHistory;
+  (0, import_react6.useEffect)(() => {
+    if (!client) return;
+    const off = client.on("relay", (from, data) => {
+      setMessages((prev) => {
+        const next = [...prev, { from, data, ts: Date.now() }];
+        return next.length > maxRef.current ? next.slice(-maxRef.current) : next;
+      });
+    });
+    return off;
+  }, [client]);
+  const send = (0, import_react6.useCallback)(
+    (to, data) => {
+      client?.relay(to, data);
+    },
+    [client]
+  );
+  const clear = (0, import_react6.useCallback)(() => setMessages([]), []);
+  return { messages, send, clear };
+}
+
+// src/use-media-stream.ts
+var import_react7 = require("react");
+function useMediaStream() {
+  const [localStream, setLocalStream] = (0, import_react7.useState)(null);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const streamRef = (0, import_react7.useRef)(null);
+  const start = (0, import_react7.useCallback)(async (constraints) => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia(
+        constraints ?? { audio: true, video: true }
+      );
+      streamRef.current = stream;
+      setLocalStream(stream);
+      setError(null);
+      return stream;
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+      return null;
+    }
+  }, []);
+  const stop = (0, import_react7.useCallback)(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    setLocalStream(null);
+  }, []);
+  const attachToPeer = (0, import_react7.useCallback)((peer) => {
+    if (streamRef.current) peer.addStream(streamRef.current);
+  }, []);
+  const detachFromPeer = (0, import_react7.useCallback)((peer) => {
+    if (streamRef.current) peer.removeStream(streamRef.current);
+  }, []);
+  const toggleAudio = (0, import_react7.useCallback)((enabled) => {
+    streamRef.current?.getAudioTracks().forEach((t) => {
+      t.enabled = enabled ?? !t.enabled;
+    });
+  }, []);
+  const toggleVideo = (0, import_react7.useCallback)((enabled) => {
+    streamRef.current?.getVideoTracks().forEach((t) => {
+      t.enabled = enabled ?? !t.enabled;
+    });
+  }, []);
+  return {
+    localStream,
+    error,
+    start,
+    stop,
+    attachToPeer,
+    detachFromPeer,
+    toggleAudio,
+    toggleVideo
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PeerProvider,
+  useBroadcast,
+  useMatch,
+  useMediaStream,
+  useNamespace,
+  usePeer,
+  usePeerClient,
+  usePeerContext,
+  useRelay
+});

package/dist/index.mjs

@@ -0,0 +1,363 @@
+// src/provider.tsx
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { PeerClient } from "peerserver-client";
+import { jsx } from "react/jsx-runtime";
+var PeerContext = createContext({
+  client: null,
+  connected: false,
+  fingerprint: "",
+  alias: "",
+  error: null,
+  reconnecting: false
+});
+function PeerProvider({
+  config,
+  children,
+  autoConnect = true
+}) {
+  const clientRef = useRef(null);
+  const [connected, setConnected] = useState(false);
+  const [fingerprint, setFingerprint] = useState("");
+  const [alias, setAlias] = useState("");
+  const [error, setError] = useState(null);
+  const [reconnecting, setReconnecting] = useState(false);
+  useEffect(() => {
+    const client = new PeerClient(config);
+    clientRef.current = client;
+    client.on("registered", (fp, a) => {
+      setFingerprint(fp);
+      setAlias(a);
+      setConnected(true);
+      setReconnecting(false);
+      setError(null);
+    });
+    client.on("disconnected", () => {
+      setConnected(false);
+    });
+    client.on("reconnecting", () => {
+      setReconnecting(true);
+    });
+    client.on("reconnected", () => {
+      setReconnecting(false);
+      setConnected(true);
+    });
+    client.on("error", (err) => {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    });
+    if (autoConnect) {
+      client.connect().catch((e) => {
+        setError(e instanceof Error ? e : new Error(String(e)));
+      });
+    }
+    return () => {
+      client.disconnect();
+      clientRef.current = null;
+    };
+  }, [config.url]);
+  return /* @__PURE__ */ jsx(
+    PeerContext.Provider,
+    {
+      value: {
+        client: clientRef.current,
+        connected,
+        fingerprint,
+        alias,
+        error,
+        reconnecting
+      },
+      children
+    }
+  );
+}
+function usePeerContext() {
+  return useContext(PeerContext);
+}
+
+// src/use-peer-client.ts
+function usePeerClient() {
+  const ctx = usePeerContext();
+  return {
+    client: ctx.client,
+    connected: ctx.connected,
+    fingerprint: ctx.fingerprint,
+    alias: ctx.alias,
+    error: ctx.error,
+    reconnecting: ctx.reconnecting,
+    relay: (to, payload) => ctx.client?.relay(to, payload),
+    broadcast: (namespace, data) => ctx.client?.broadcast(namespace, data),
+    updateMetadata: (meta) => ctx.client?.updateMetadata(meta),
+    disconnect: () => ctx.client?.disconnect()
+  };
+}
+
+// src/use-namespace.ts
+import { useEffect as useEffect2, useState as useState2, useCallback } from "react";
+function useNamespace(namespace, appType, version) {
+  const { client, connected } = usePeerContext();
+  const [peers, setPeers] = useState2([]);
+  const [joined, setJoined] = useState2(false);
+  useEffect2(() => {
+    if (!client || !connected || !namespace) return;
+    client.join(namespace, appType, version).then((list) => {
+      setPeers(list);
+      setJoined(true);
+    });
+    const offJoined = client.on("peer_joined", (info) => {
+      setPeers((prev) => {
+        if (prev.some((p) => p.fingerprint === info.fingerprint)) return prev;
+        return [...prev, info];
+      });
+    });
+    const offLeft = client.on("peer_left", (fp) => {
+      setPeers((prev) => prev.filter((p) => p.fingerprint !== fp));
+    });
+    return () => {
+      offJoined();
+      offLeft();
+      client.leave(namespace);
+      setJoined(false);
+      setPeers([]);
+    };
+  }, [client, connected, namespace]);
+  const discover = useCallback(
+    (limit) => client?.discover(namespace, limit) ?? Promise.resolve([]),
+    [client, namespace]
+  );
+  return { peers, joined, discover };
+}
+
+// src/use-peer.ts
+import { useEffect as useEffect3, useState as useState3, useCallback as useCallback2, useRef as useRef2 } from "react";
+function usePeer(fingerprint, options) {
+  const { client } = usePeerContext();
+  const [peer, setPeer] = useState3(null);
+  const [connectionState, setConnectionState] = useState3("new");
+  const [messages, setMessages] = useState3([]);
+  const [streams, setStreams] = useState3([]);
+  const maxMessages = useRef2(100);
+  useEffect3(() => {
+    if (!client || !fingerprint) return;
+    const autoConnect = options?.autoConnect ?? true;
+    let p;
+    const existing = client.getPeer(fingerprint);
+    if (existing) {
+      p = existing;
+    } else if (autoConnect) {
+      p = client.connectToPeer(fingerprint, options?.alias ?? "", options?.channelConfig);
+    } else {
+      return;
+    }
+    setPeer(p);
+    setConnectionState(p.connectionState);
+    const offConnected = p.on("connected", () => setConnectionState("connected"));
+    const offDisconnected = p.on("disconnected", (state) => setConnectionState(state));
+    const offData = p.on("data", (data, channel) => {
+      setMessages((prev) => {
+        const next = [...prev, { data, channel, ts: Date.now() }];
+        return next.length > maxMessages.current ? next.slice(-maxMessages.current) : next;
+      });
+    });
+    const offStream = p.on("stream", (stream) => {
+      setStreams((prev) => [...prev, stream]);
+    });
+    return () => {
+      offConnected();
+      offDisconnected();
+      offData();
+      offStream();
+    };
+  }, [client, fingerprint]);
+  const send = useCallback2(
+    (data, channel) => {
+      peer?.send(data, channel);
+    },
+    [peer]
+  );
+  const addStream = useCallback2(
+    (stream) => {
+      peer?.addStream(stream);
+    },
+    [peer]
+  );
+  const removeStream = useCallback2(
+    (stream) => {
+      peer?.removeStream(stream);
+    },
+    [peer]
+  );
+  const close = useCallback2(() => {
+    if (fingerprint) client?.closePeer(fingerprint);
+    setPeer(null);
+    setConnectionState("closed");
+    setMessages([]);
+    setStreams([]);
+  }, [client, fingerprint]);
+  const clearMessages = useCallback2(() => setMessages([]), []);
+  return {
+    peer,
+    connectionState,
+    connected: connectionState === "connected",
+    messages,
+    streams,
+    send,
+    addStream,
+    removeStream,
+    close,
+    clearMessages
+  };
+}
+
+// src/use-match.ts
+import { useState as useState4, useCallback as useCallback3 } from "react";
+function useMatch(namespace) {
+  const { client } = usePeerContext();
+  const [result, setResult] = useState4(null);
+  const [matching, setMatching] = useState4(false);
+  const [error, setError] = useState4(null);
+  const match = useCallback3(
+    async (criteria) => {
+      if (!client) return;
+      setMatching(true);
+      setError(null);
+      try {
+        const res = await client.match(namespace, criteria);
+        setResult(res);
+        return res;
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+      } finally {
+        setMatching(false);
+      }
+    },
+    [client, namespace]
+  );
+  const connectToMatch = useCallback3(
+    (index = 0) => {
+      if (!client || !result) return null;
+      const target = result.peers[index];
+      if (!target) return null;
+      return client.connectToPeer(target.fingerprint, target.alias);
+    },
+    [client, result]
+  );
+  return { match, result, matching, error, connectToMatch };
+}
+
+// src/use-broadcast.ts
+import { useEffect as useEffect4, useState as useState5, useCallback as useCallback4, useRef as useRef3 } from "react";
+function useBroadcast(namespace, maxHistory = 100) {
+  const { client } = usePeerContext();
+  const [messages, setMessages] = useState5([]);
+  const maxRef = useRef3(maxHistory);
+  maxRef.current = maxHistory;
+  useEffect4(() => {
+    if (!client) return;
+    const off = client.on("broadcast", (from, ns, data) => {
+      if (ns !== namespace) return;
+      setMessages((prev) => {
+        const next = [...prev, { from, namespace: ns, data, ts: Date.now() }];
+        return next.length > maxRef.current ? next.slice(-maxRef.current) : next;
+      });
+    });
+    return off;
+  }, [client, namespace]);
+  const send = useCallback4(
+    (data) => {
+      client?.broadcast(namespace, data);
+    },
+    [client, namespace]
+  );
+  const clear = useCallback4(() => setMessages([]), []);
+  return { messages, send, clear };
+}
+
+// src/use-relay.ts
+import { useEffect as useEffect5, useState as useState6, useCallback as useCallback5, useRef as useRef4 } from "react";
+function useRelay(maxHistory = 100) {
+  const { client } = usePeerContext();
+  const [messages, setMessages] = useState6([]);
+  const maxRef = useRef4(maxHistory);
+  maxRef.current = maxHistory;
+  useEffect5(() => {
+    if (!client) return;
+    const off = client.on("relay", (from, data) => {
+      setMessages((prev) => {
+        const next = [...prev, { from, data, ts: Date.now() }];
+        return next.length > maxRef.current ? next.slice(-maxRef.current) : next;
+      });
+    });
+    return off;
+  }, [client]);
+  const send = useCallback5(
+    (to, data) => {
+      client?.relay(to, data);
+    },
+    [client]
+  );
+  const clear = useCallback5(() => setMessages([]), []);
+  return { messages, send, clear };
+}
+
+// src/use-media-stream.ts
+import { useState as useState7, useCallback as useCallback6, useRef as useRef5 } from "react";
+function useMediaStream() {
+  const [localStream, setLocalStream] = useState7(null);
+  const [error, setError] = useState7(null);
+  const streamRef = useRef5(null);
+  const start = useCallback6(async (constraints) => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia(
+        constraints ?? { audio: true, video: true }
+      );
+      streamRef.current = stream;
+      setLocalStream(stream);
+      setError(null);
+      return stream;
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+      return null;
+    }
+  }, []);
+  const stop = useCallback6(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    setLocalStream(null);
+  }, []);
+  const attachToPeer = useCallback6((peer) => {
+    if (streamRef.current) peer.addStream(streamRef.current);
+  }, []);
+  const detachFromPeer = useCallback6((peer) => {
+    if (streamRef.current) peer.removeStream(streamRef.current);
+  }, []);
+  const toggleAudio = useCallback6((enabled) => {
+    streamRef.current?.getAudioTracks().forEach((t) => {
+      t.enabled = enabled ?? !t.enabled;
+    });
+  }, []);
+  const toggleVideo = useCallback6((enabled) => {
+    streamRef.current?.getVideoTracks().forEach((t) => {
+      t.enabled = enabled ?? !t.enabled;
+    });
+  }, []);
+  return {
+    localStream,
+    error,
+    start,
+    stop,
+    attachToPeer,
+    detachFromPeer,
+    toggleAudio,
+    toggleVideo
+  };
+}
+export {
+  PeerProvider,
+  useBroadcast,
+  useMatch,
+  useMediaStream,
+  useNamespace,
+  usePeer,
+  usePeerClient,
+  usePeerContext,
+  useRelay
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "peerserver-client-react",
+  "version": "1.0.0",
+  "description": "React hooks for peerserver-client",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "peerserver-client": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "keywords": [
+    "webrtc",
+    "react",
+    "hooks",
+    "p2p",
+    "peerserver"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react --external peerserver-client"
+  }
+}