# @artcom/mqtt-topping-react

> Wraps the Art+Com Mqtt Topping library for react.

Latest version **3.2.1** (published 2026-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @artcom/mqtt-topping-react
pnpm add @artcom/mqtt-topping-react
yarn add @artcom/mqtt-topping-react
bun add @artcom/mqtt-topping-react
```

## Health

**Score 60/100 (C)** — status: stable.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.2.1 |
| Published | 2026-03-18 |
| First published | 2020-06-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Art+Com GmbH |
| Maintainers | becks-artcom, utileetdulce, j-era, d-lin |
| Keywords | mqtt, json, http, async |

## Links

- npm: https://www.npmjs.com/package/@artcom/mqtt-topping-react
- Repository: https://github.com/artcom/mqtt-topping-react
- Homepage: https://github.com/artcom/mqtt-topping-react#readme
- Issues: https://github.com/artcom/mqtt-topping-react/issues
- npm.io page: https://npm.io/package/@artcom/mqtt-topping-react

## Dependencies (2)

- [@artcom/mqtt-topping](https://npm.io/package/@artcom/mqtt-topping.md) ^5.0.1
- [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^5.90.11

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 3.2.1 (latest) — 2026-03-18
- 3.0.0-beta.3 (beta) — 2026-01-02
- 3.2.0 — 2026-01-02
- 3.1.1 — 2025-12-02
- 3.1.0 — 2025-12-02
- 3.0.0 — 2025-12-02
- 3.0.0-beta.2 — 2025-12-01
- 3.0.0-beta.0 — 2024-04-08
- 2.2.2 — 2024-03-01
- 2.2.1 — 2022-09-05
- 2.2.0 — 2022-04-06
- 2.1.1 — 2022-02-17
- 2.1.0 — 2022-02-16
- 2.0.6 — 2021-11-22
- 2.0.4 — 2021-01-14
- … 14 more at https://npm.io/package/@artcom/mqtt-topping-react/versions

## README

# @artcom/mqtt-topping-react

A React wrapper for `@artcom/mqtt-topping` providing hooks and context for easy MQTT and HTTP integration.

## Installation

```bash
npm install @artcom/mqtt-topping-react
```

> **Note**: This package includes `@artcom/mqtt-topping` and `@tanstack/react-query` as dependencies, so you don't need to install them separately.

## Usage

### MqttProvider

Wrap your application with `MqttProvider`. You can provide a `suspenseFallback` to handle the initial connection state automatically.

```tsx
import { MqttProvider } from "@artcom/mqtt-topping-react"

function App() {
  return (
    <MqttProvider
      uri="ws://broker.hivemq.com:8000/mqtt"
      httpBrokerUri="http://broker.hivemq.com:8000/query" // Optional: for useMqttQuery
      suspenseFallback={<div>Connecting to MQTT...</div>} // Optional: shows this while connecting
    >
      <YourApp />
    </MqttProvider>
  )
}
```

### Hooks

#### `useMqttSubscribe`

Subscribe to a topic.

```tsx
import { useMqttSubscribe } from "@artcom/mqtt-topping-react"

function MyComponent() {
  useMqttSubscribe("my/topic", (payload, topic) => {
    console.log("Received:", payload)
  })

  return <div>Listening...</div>
}
```

#### `useHttpClient`

Access the HTTP client directly.

```tsx
import { useHttpClient } from "@artcom/mqtt-topping-react"

function MyComponent() {
  const httpClient = useHttpClient()

  const fetchData = async () => {
    const data = await httpClient?.queryJson("my/topic")
    console.log(data)
  }

  return <button onClick={fetchData}>Fetch</button>
}
```

#### `useMqttQuery`

Fetch data using TanStack Query integration. This provides caching, loading states, and error handling out of the box. Requires `httpBrokerUri` to be set in `MqttProvider`.

```tsx
import { useMqttQuery } from "@artcom/mqtt-topping-react"

function MyComponent() {
  const { data, isLoading, error } = useMqttQuery("my/topic")

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return <div>Data: {JSON.stringify(data)}</div>
}
```

#### `useMqttQueryBatch`

Fetch multiple topics in a single batch request.

```tsx
import { useMqttQueryBatch } from "@artcom/mqtt-topping-react"

function MyComponent() {
  const { data, isLoading, error } = useMqttQueryBatch(["topic/1", "topic/2"])

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <div>
      {data?.map((result, index) => (
        <div key={index}>{JSON.stringify(result)}</div>
      ))}
    </div>
  )
}
```

#### `useMqttUnpublishRecursively`

Unpublish a topic and all its subtopics recursively.

```tsx
import { useMqttUnpublishRecursively } from "@artcom/mqtt-topping-react"

function MyComponent() {
  const unpublishRecursively = useMqttUnpublishRecursively()

  const handleCleanup = async () => {
    await unpublishRecursively("my/topic")
  }

  return <button onClick={handleCleanup}>Cleanup</button>
}
```

## API Reference

### MqttProvider Props

| Prop               | Type                | Description                                                                 |
| ------------------ | ------------------- | --------------------------------------------------------------------------- |
| `uri`              | `string`            | The MQTT broker URI (e.g., `tcp://localhost:1883` or `ws://localhost:9001`) |
| `options`          | `MqttClientOptions` | Optional configuration for the MQTT client                                  |
| `httpBrokerUri`    | `string`            | Optional URI for the HTTP interface of the broker                           |
| `httpOptions`      | `HttpClientOptions` | Optional configuration for the HTTP client                                  |
| `suspenseFallback` | `ReactNode`         | Optional fallback UI to show while connecting                               |
| `children`         | `ReactNode`         | Child components                                                            |

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