react-websocket

library2.1.0jsnpmunverified

React WebSocket is a component-based library for integrating WebSocket connections into React applications. Version 2.1.0 is the latest stable release, with infrequent updates and dependence on community contributions. It provides a simple <Websocket> component with props for URL, message handling, and connection events, and includes built-in reconnection logic. Unlike more complex alternatives, this library offers a minimal, declarative approach but is less actively maintained and lacks advanced features like request/response patterns or subscription management. It requires React 0.14.5+.

messaging

npm install react-websocket

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-WEBSOCKET

react-websocket

messagingjavascriptv2.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.

Websocket

✓ import Websocket from 'react-websocket'

✗ import { Websocket } from 'react-websocket'

Default export only; named import will result in undefined.

default

✓ const Websocket = require('react-websocket').default

✗ const Websocket = require('react-websocket')

CJS requires .default because library uses ESM-style default export.

Websocket

✓ import Websocket from 'react-websocket'

✗ const { Websocket } = require('react-websocket')

Destructuring require() will not work; must use .default.

Basic usage: renders a WebSocket component that receives JSON messages and updates state.

import React from 'react'; import Websocket from 'react-websocket'; function App() { const [count, setCount] = React.useState(90); const handleData = (data) => { const result = JSON.parse(data); setCount(prev => prev + result.movement); }; return ( <div> Count: <strong>{count}</strong> <Websocket url='ws://localhost:8888/live/product/12345/' onMessage={handleData} /> </div> ); } export default App;

Debug

Known issues

breakingonMessage callback receives raw data (string) – not parsed JSON.

fix

Manually JSON.parse(data) inside onMessage.

affects: >=2.0.0

deprecatedComponent does not unmount cleanly; may cause memory leaks.

fix

Ensure parent component unmounts to trigger WebSocket close.

affects: >=1.0.0

gotchaLibrary has no built-in authorization or headers support.

fix

Append parameters to URL or implement custom wrapper.

affects: >=1.0.0

gotchaReconnection logic uses accelerated backoff; may flood server on flaky connections.

fix

Set reconnect prop to false and implement custom reconnect if needed.

affects: >=1.0.0

deprecatedLibrary is not actively maintained; open issues may go unanswered.

fix

Consider using alternative libraries like react-use-websocket or socket.io-client.

affects: >=2.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'react-websocket'

Package not installed or missing because only peer deps exist.

fix

Run 'npm install react-websocket --save' and ensure React is installed.

TypeError: Websocket is not a constructor

Using named import instead of default import.

fix

Use 'import Websocket from "react-websocket"' (without braces).

Warning: Failed prop type: The prop `url` is marked as required in `Websocket`

Missing url prop on <Websocket> component.

fix

Add url prop like <Websocket url='ws://example.com' onMessage={...} />.

Uncaught SyntaxError: Unexpected token u in JSON at position 0

onMessage receives raw string; code tries JSON.parse on non-JSON data.

fix

Ensure server sends valid JSON or wrap parse in try-catch.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for JSX rendering

react-domrequiredPeer dependency required for DOM rendering

Agent activity

24 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubssh://git@github.com/mehmetkose/react-websocket ↗

packagereact-websocket ↗

homepagehttps://github.com/mehmetkose/react-websocket ↗