react-socket-store

react-socket-store connects socket-store to React with a provider and hooks for reading topic state, sending payloads, and cleaning up subscriptions in components.

Use it when you already have a SocketStore instance and want a React-friendly way to share it through context or pass it directly into a focused client subtree.

Install

npm install react-socket-store socket-store

Getting Started

Create the SocketStore first, then choose either SocketProvider or the store-direct hooks:

import { useEffect, useState } from "react";
import {
  SocketProvider,
  SocketStore,
  createMessageHandler,
  useSocket,
  type ISocketStore,
} from "react-socket-store";

type ChatSchema = {
  talk: {
    state: string[];
    payload: string;
  };
};

function ChatMessages({ canSend }: { canSend: boolean }) {
  const [messages, sendTalk] = useSocket<ChatSchema, "talk">("talk");

  return (
    <button
      type="button"
      disabled={!canSend}
      onClick={() => sendTalk("hello")}
    >
      Messages: {messages.length}
    </button>
  );
}

export function ChatBoundary() {
  const [canSend, setCanSend] = useState(false);
  const [store, setStore] = useState<ISocketStore<ChatSchema> | null>(null);

  useEffect(() => {
    const socket = new WebSocket("wss://example.com/chat");
    const nextStore = new SocketStore(socket, [
      createMessageHandler<string[], string>(
        "talk",
        (messages, message) => [...messages, message],
        []
      ),
    ]) as unknown as ISocketStore<ChatSchema>;

    socket.addEventListener("open", () => setCanSend(true));
    socket.addEventListener("close", () => setCanSend(false));

    setStore(nextStore);

    return () => {
      setCanSend(false);
      socket.close();
    };
  }, []);

  if (store === null) {
    return null;
  }

  return (
    <SocketProvider store={store}>
      <ChatMessages canSend={canSend} />
    </SocketProvider>
  );
}

Choose An Integration Shape

• Guide: provider setup, store-direct hooks, and cleanup guidance.
• Examples: provider, store-direct, and Next.js usage patterns.
• API: exported hooks, provider types, and adapter surface.
• Next.js: client-boundary guidance for App Router projects.
• Compatibility: version pairing and package ownership.
• Migration: current migration notes and boundary changes.

What This Package Owns

react-socket-store owns the React adapter layer: SocketProvider, store-direct hooks, useSocketStoreRef, schema-safe hook types, and React subscription cleanup.

The framework-agnostic WebSocket behavior still belongs to socket-store.