@triggery/socket

Pipe socket.io events or native WebSocket messages into Triggery events. Two hooks, one shape, both StrictMode-safe — useEffect-based attach and detach.

Install

pnpm

pnpm add @triggery/core @triggery/react @triggery/socket

npm

npm install @triggery/core @triggery/react @triggery/socket

yarn

yarn add @triggery/core @triggery/react @triggery/socket

bun

bun add @triggery/core @triggery/react @triggery/socket

Peer deps: react >= 18.0.0. The native WebSocket constructor is used directly when needed — no extra dependency required.

What’s inside

Export	Purpose
useSocketIoEvent(trigger, eventName, socket, socketEventName, options?)	Forward a socket.io-client event into a trigger event. Variadic args supported.
useWebSocketEvent(trigger, eventName, ws, wsEvent, options?)	Forward a native WebSocket event ('message', 'open', 'close', 'error', custom).

Quick example

socket.io

import { io } from 'socket.io-client';
import { useSocketIoEvent } from '@triggery/socket';

const socket = io('https://example.com');

function MessageBridge() {
  useSocketIoEvent(messageTrigger, 'new-message', socket, 'message');
  return null;
}

With variadic args:

useSocketIoEvent(messageTrigger, 'new-message', socket, 'msg', {
  mapPayload: (from, text) => ({ from, text }),
});

Native WebSocket

import { useWebSocketEvent } from '@triggery/socket';

const ws = new WebSocket('wss://example.com');

function MessageBridge() {
  useWebSocketEvent(messageTrigger, 'new-message', ws, 'message', {
    mapPayload: (e) => JSON.parse((e as MessageEvent).data),
  });
  return null;
}

wsEvent accepts any string — typed for 'message' | 'open' | 'close' | 'error' but extensible.

How it works

Both hooks attach in useEffect (commit phase, StrictMode-safe) and detach on unmount or when their inputs change. If socket / ws is null or undefined, the hook is a no-op until you supply a connection — useful while the socket is being created asynchronously.

Related packages

@triggery/core Exposes Trigger.

@triggery/react These are React hooks.

@triggery/dom Alternative event source: DOM events, ResizeObserver, IntersectionObserver.

@triggery/query Pair socket-driven events with TanStack Query cache reads.

Source

• GitHub
• npm
• Changelog