Registry / messaging / react-with-websocket

react-with-websocket

library3.1.0jsnpmunverified

Higher-order components (HOCs) for integrating WebSocket connections into React applications. Current stable version is 3.1.0. It provides a declarative way to subscribe to WebSocket messages and events using React context and HOC composition. Key differentiators: explicit separation of WebSocket source (context provider), subscription creation (createSubscription), and connection injection (withWebSocket). Compared to raw WebSocket usage or hook-based libraries, this library uses a HOC pattern typical of class-component era React. It requires React 16.8.6+ and is Node 8+ compatible. Maintenance is minimal; last release was in 2019.

messaging

npm install react-with-websocket

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-WITH-WEBSOCK

react-with-websocket

messagingjavascriptv3.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createSubscription

✓ import { createSubscription } from 'react-with-websocket'

✗ const createSubscription = require('react-with-websocket').createSubscription

Package exports ES modules. Named export.

withWebSocket

✓ import { withWebSocket } from 'react-with-websocket'

Named export; HOC to inject WebSocket context from WebSocketContextProvider.

WebSocketContextProvider

✓ import { WebSocketContextProvider } from 'react-with-websocket'

Named export; required as root wrapper to provide a WebSocket instance via context.

Shows HOC pattern: createSubscription with full lifecycle, then withWebSocket to inject WebSocket from context provider.

import React from 'react'; import { createSubscription, WebSocketContextProvider, withWebSocket } from 'react-with-websocket'; // Create subscription const withPingSubscription = createSubscription( { ping: null }, { ping: 'pending' }, (state) => ({ ping: state.ping }), (messageEvent) => { const data = JSON.parse(messageEvent.data); return { ping: data.ping }; } ); // Component const PingDisplay = ({ ping }) => <div>Ping: {ping}</div>; const PingWithSub = withPingSubscription(PingDisplay); const PingWithWS = withWebSocket(PingWithSub); // App function App() { const ws = new WebSocket('wss://example.com/ws'); return ( <WebSocketContextProvider value={ws}> <PingWithWS /> </WebSocketContextProvider> ); } export default App;

Debug

Known issues

deprecatedLibrary uses class-component HOC pattern; React hooks are now preferred.

fix

Consider using a hooks-based WebSocket library like 'react-use-websocket' for new projects.

affects: >=1.0.0

breakingVersion 2.0.0 changed createSubscription signature from (initState, fallbackProps, mapStateToProps, mapMessageToState, mapEventToState) - verify all arguments are provided correctly.

fix

See v2 migration guide: ensure mapEventToState is included as 5th arg even if undefined.

affects: >=2.0.0 <3.0.0

gotchaWebSocketContextProvider must be a direct or indirect ancestor; it does not accept props to update WebSocket instance - reconnection must be handled externally.

fix

Implement your own reconnection logic for the WebSocket object before passing to provider.

affects: >=1.0.0

gotchamapEventToState is optional but if omitted, subscription will ignore WebSocket events (open, close, error).

fix

Pass undefined as the 5th argument to createSubscription if not needed; do not skip the argument.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read property 'currentTarget' of undefined

WebSocket object passed to WebSocketContextProvider is not properly initialized or is null/undefined.

fix

Ensure ws is created before render: const ws = useRef(null); useEffect(() => { ws.current = new WebSocket(url); }, []);

Warning: Failed context type: The context 'WebSocketContext' is marked as required in 'WebSocketContextProvider', but its value is undefined.

Missing WebSocketContextProvider or the value prop is undefined.

fix

Wrap components with <WebSocketContextProvider value={ws}> and ensure ws is defined.

Uncaught TypeError: subscription is not a function

Incorrect import - likely using default import instead of named import for createSubscription.

fix

Use import { createSubscription } from 'react-with-websocket' instead of default import.

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for JSX and component lifecycle

react-domrequiredPeer dependency for rendering

Agent activity

23 hits · last 30 days

node

OpenAI (training)

Resources

githubgit@github.com:Librazy/react-with-websocket ↗

packagereact-with-websocket ↗

homepagehttps://github.com/Librazy/react-with-websocket ↗