EdgeStream
React Bindings Overview
The edge-stream-js-react package provides React hooks and a context provider that wire EdgeStream subscriptions into React's lifecycle. Subscriptions created via these hooks are automatically cleaned up when components unmount — no subscription leaks.
Package Exports
import {
EdgeStreamProvider, // context provider — wraps the app
useEdgeStream, // access the EdgeStream client from any component
useSubscription, // subscribe to a topic, auto-cleanup on unmount
useConnectionStatus, // reactive connection status + stats + health
} from 'edge-stream-js-react';Why React Bindings?
Without React bindings, you must manually manage subscription cleanup in useEffect return functions. This is error-prone — a missed cleanup causes memory leaks and phantom handlers after component unmount:
// Without React bindings — manual cleanup (error-prone)
useEffect(() => {
const sub = stream.subscribe('bas', 'workflow.*', handler);
return () => sub.unsubscribe(); // easy to forget
}, []);
// With React bindings — cleanup is automatic
useSubscription('bas', 'workflow.*', handler);
// unsubscribes automatically when component unmountsHooks at a Glance
| Hook | Returns | Purpose |
|---|---|---|
useEdgeStream() | EdgeStream client | Access the client to call subscribe(), send(), server() etc. |
useSubscription(serverId, topic, handler, options?) | { isSubscribed, unsubscribe, error } | Subscribe with automatic lifecycle management |
useConnectionStatus() | { status, stats, health, isReady } | Reactive connection state, message counts, health metrics |
Quick Start
// 1. Wrap your app
import { createEdgeStream } from 'edge-stream-js';
import { EdgeStreamProvider } from 'edge-stream-js-react';
const stream = createEdgeStream({ logLevel: 'info' });
stream.registerServer({ id: 'bas', type: 'bas', url: '/hubs/edge-stream',
transportConfig: { type: 'signalr', url: '/hubs/edge-stream' } });
function App() {
return (
<EdgeStreamProvider edgeStreamClient={stream}>
<YourApp />
</EdgeStreamProvider>
);
}
// 2. Subscribe in any component
import { useSubscription } from 'edge-stream-js-react';
function WorkflowStatus() {
useSubscription('bas', 'workflow.*', (envelope) => {
console.log('Workflow event:', envelope.meta.topic, envelope.body);
});
return <div>...</div>;
}