# react-stomp-client

> A React STOMP client

Latest version **1.2.0** (published 2019-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-stomp-client
pnpm add react-stomp-client
yarn add react-stomp-client
bun add react-stomp-client
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-12-11 |
| First published | 2019-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 352.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Rufus Raghunath |
| Maintainers | rufusraghunath |
| Keywords | stomp, client, react, javascript, websocket |

## Links

- npm: https://www.npmjs.com/package/react-stomp-client
- Repository: https://github.com/rufusraghunath/js-stomp-utils
- Homepage: https://github.com/rufusraghunath/js-stomp-utils#readme
- Issues: https://github.com/rufusraghunath/js-stomp-utils/issues
- npm.io page: https://npm.io/package/react-stomp-client

## Dependencies (2)

- [@stomp/stompjs](https://npm.io/package/@stomp/stompjs.md) ^5.4.2
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2019-12-11
- 1.1.4 — 2019-12-11
- 1.1.3 — 2019-10-28

## README

# [ReactStompClient](https://www.npmjs.com/package/react-stomp-client)

A simple STOMP message client for React. It will connect to the provided `endpoint` on mount, followed immmediately by a subscription to the provided `topic`. The connection gets cleaned up on unmount.

Easily testable via [`mock-stomp-broker`](https://www.npmjs.com/package/mock-stomp-broker)!

Supports TypeScript.

## Installing

`npm install --save react-stomp-client`

## Usage example

```jsx
import React, { Component } from "react";
import StompClient from "react-stomp-client";

class MyComponent extends Component {
  constructor(props) {
    this.state = {
      latestMessage: null
    };

    this.handleMessage = this.handleMessage.bind(this);
  }

  handleMessage(stompMessage) {
    this.setState({
      latestMessage: stompMessage
    });
  }

  render() {
    const { latestMessage } = this.state;
    return (
      <StompClient
        endpoint="ws://localhost:8888/websocket"
        topic="my-topic"
        onMessage={this.handleMessage}
      >
        <div>
          {latestMessage
            ? `Latest message received: ${latestMessage}`
            : "No message received yet"}
        </div>
      </StompClient>
    );
  }
}
```

## Props

| Prop                | Required? | Description                                                                                                                                     |
| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `endpoint`          | Yes       | The STOMP endpoint to connect to. The server should be up and ready to speak STOMP via WebSocket (the protocol should be either `ws` or `wss`). |
| `topic`             | No        | The STOMP topic to subscribe to. When no topic is provided, no subscription attempt is made.                                                    |
| `onMessage`         | No        | The callback to invoke when a STOMP message arrives.                                                                                            |
| `children`          | No        | Any React component subtree. Use this to tie the together the lifecycles of the `StompClient` and any components that depend on data from it.   |
| `reconnectDelay`    | No        | The delay in ms to wait before attempting to reconnect to the `endpoint` after a connections is interrupted. Defaults to 3000.                  |
| `heartbeatIncoming` | No        | The heartbeat frequency in ms to request from the server. Defaults to 30000.                                                                    |
| `heartbeatOutgoing` | No        | The heartbeat frequency in ms to send to the server. Defaults to 30000.                                                                         |

---
_Source: https://npm.io/package/react-stomp-client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._