react-stomp

library5.1.0jsnpmunverified

A React component that wraps SockJS-client with the STOMP messaging protocol for real-time WebSocket communication. Current stable version is 5.1.0, released in January 2021, with sporadic updates focusing on dependency bumps and bug fixes. It provides a declarative way to connect to STOMP over SockJS endpoints, supporting automatic reconnection, topic subscriptions, and message handling. Differentiators include integration with Spring Boot backends and a simple component-based API, but it is lightly maintained and may not see frequent updates.

messaging

npm install react-stomp

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-STOMP

react-stomp

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

SockJsClient

✓ import SockJsClient from 'react-stomp'

✗ import { SockJsClient } from 'react-stomp'

Default export, not named. Using named import will result in undefined.

default

✓ const SockJsClient = require('react-stomp').default

✗ const SockJsClient = require('react-stomp')

CommonJS users must access .default due to ESM interop.

SockJsClient (type)

✓ import type { SockJsClient as SockJsClientType } from 'react-stomp'

If using TypeScript, you can import the type for props; the component itself is default export.

Shows basic usage with a class component, subscribing to a topic and displaying messages.

import React from 'react'; import SockJsClient from 'react-stomp'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { messages: [] }; } render() { return ( <div> <SockJsClient url='http://localhost:8080/ws' topics={['/topic/public']} onMessage={(msg) => { this.setState({ messages: [...this.state.messages, msg] }); }} onConnect={() => console.log('Connected')} onDisconnect={() => console.log('Disconnected')} ref={(client) => { this.clientRef = client; }} /> <ul> {this.state.messages.map((m, i) => <li key={i}>{m}</li>)} </ul> </div> ); } } export default MyComponent;

Debug

Known issues

breakingIn version 4.0.0, plain text messages are now supported, but the message format may change for non-JSON payloads

fix

Ensure your onMessage handler can handle both JSON objects and plain strings.

affects: >=4.0.0

deprecatedcomponentWillReceiveProps lifecycle is deprecated in React 16 and causes warnings

fix

Upgrade to 5.0.0+ which uses getDerivedStateFromProps or other patterns.

affects: <5.0.0

breakingIn version 5.1.0, subscribeHeaders corruption was fixed; earlier versions may send wrong headers

fix

Upgrade to 5.1.0+ if subscribing to multiple topics with headers.

affects: <5.1.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read property 'sendMessage' of undefined

The ref is not properly attached before calling sendMessage

fix

Use callback ref and call sendMessage in componentDidMount or after connection established via onConnect.

Module not found: Can't resolve 'stompjs'

The package 'stompjs' is a peer dependency and not installed automatically

fix

Run 'npm install stompjs' or 'npm install @stomp/stompjs' (the latter is a fork, but react-stomp expects the original).

WebSocket connection to 'ws://...' failed: Error during WebSocket handshake

The server endpoint does not exist or is not properly configured for SockJS/STOMP

fix

Verify the server URL includes '/ws' or the correct SockJS endpoint, and that the server supports STOMP.

Upgrade

Version history

5.1.0latest on npm

Audit

Dependencies

sockjs-clientrequiredWebSocket emulation for environments without native WebSocket support

stompjsrequiredSTOMP protocol implementation for messaging

Agent activity

16 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/lahsivjar/react-stomp ↗

packagereact-stomp ↗

homepagehttps://github.com/lahsivjar/react-stomp#readme ↗