https://github.com/erich2s/react-mqtt-hooks
React Hooks for MQTT.
https://github.com/erich2s/react-mqtt-hooks
esp hooks iot mqtt react stm32
Last synced: 9 months ago
JSON representation
React Hooks for MQTT.
- Host: GitHub
- URL: https://github.com/erich2s/react-mqtt-hooks
- Owner: erich2s
- License: mit
- Created: 2024-03-15T14:33:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-31T14:46:55.000Z (about 1 year ago)
- Last Synced: 2025-08-09T14:36:04.452Z (11 months ago)
- Topics: esp, hooks, iot, mqtt, react, stm32
- Language: TypeScript
- Homepage: https://react-mqtt-hooks.vercel.app
- Size: 281 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
React-Mqtt-Hooks
See demo here:
## Introduction
React-Mqtt-Hooks is a library that simplifies the integration of [MQTT](https://mqtt.org/) (Message Queuing Telemetry Transport) functionality into React applications. It provides a set of custom hooks that allow developers to easily connect to an MQTT broker based on the popular [MQTT.js](https://github.com/mqttjs/MQTT.js) library.
With these hooks, you can publish messages to specific topics and subscribe to receive messages from the broker. The library seamlessly synchronizes the received MQTT messages with the state of your React functional components, enabling real-time updates and efficient data handling within your application.
## ✨ Features
- **Global Cache**: The message received from the MQTT broker is stored in a global cache, which can be accessed from any component in the application.
- **Real-time Updates**: The library automatically updates the state of your components when new messages are received from the broker.
## 📦 Installation
```bash
pnpm add react-mqtt-hooks mqtt
```
## 🚀 Quick Start
1. First, wrap your application with the `MqttConnector` component and provide the MQTT Broker URL and the [connection options](https://github.com/mqttjs/MQTT.js?tab=readme-ov-file#mqttclientstreambuilder-options).
```tsx
import { MqttConnector } from "react-mqtt-hooks";
function App() {
return (
{/* Your components here */}
);
}
```
2. Then, use the `useTopic` hook to subscribe to a topic and receive messages from the broker in your components within the `MqttConnector` component.
```tsx
import { useTopic } from "react-mqtt-hooks";
function ChatMsg() {
const msg = useTopic("chat");
return (
Messages from the broker:
{JSON.stringify(msg, null, 2)}
);
}
```
`useTopic` will cache the last message data received from the broker and update the component state under the hood. This concept is inspired by the [SWR](https://swr.vercel.app/) library.
Multiple `useTopic` hook **with same topic** will share the same message data cache. This means you can call `useTopic` accross different components and they will retrieve the same message data from cache if it exists.
## 📚 API Refference
### `MqttConnector`
The `MqttConnector` component is a provider that wraps your application and provides the raw `MqttClient` instance from [MQTT.js](https://github.com/mqttjs/MQTT.js?tab=readme-ov-file#client) to the context. It also handles the connection and disconnection of the client.
All hooks provided by this library must be used within the `MqttConnector` component.
```tsx
import { MqttConnector } from "react-mqtt-hooks";
function App() {
return (
{/* Your components */}
);
}
```
### `useMqttClient`
The `useMqttClient` hook is used to access the raw `MqttClient` instance from [MQTT.js](https://github.com/mqttjs/MQTT.js).
```tsx
import { useEffect, useState } from "react";
import { useMqttClient } from "react-mqtt-hooks";
function ConnectionStatus() {
const client = useMqttClient();
const [status, setStatus] = useState("connecting");
useEffect(() => {
if (!client)
return;
function onConnect() {
setStatus("connected");
}
function onReconnect() {
setStatus("reconnecting");
}
function onDisconnect() {
setStatus("disconnected");
}
function onClose() {
setStatus("closed");
}
client.on("connect", onConnect);
client.on("reconnect", onReconnect);
client.on("disconnect", onDisconnect);
client.on("close", onClose);
return () => {
client.off("connect", onConnect);
client.off("reconnect", onReconnect);
client.off("disconnect", onDisconnect);
client.off("close", onClose);
};
}, [client]);
return (
Connection status:
{status}
);
}
```
### `useTopic`
> [!WARNING]
> This hook currently not support wildcard subscriptions yet.
The `useTopic` hook is used to subscribe to a specific topic and receive messages from the broker. It returns the last message received from the broker.
```tsx
import { useTopic } from "react-mqtt-hooks";
function SingleTopic() {
const msg = useTopic("chat");
return (
{JSON.stringify(msg, null, 2)}
);
}
```
### `useTopics`
The `useTopics` hook is used to subscribe to multiple topics and receive messages from the broker. It merge all data from every topics into a single object.
```tsx
import { useTopics } from "react-mqtt-hooks";
function MultiTopics() {
// Must wrap the topics array with useMemo to prevent re-rendering
const topicsArr = useMemo(() => ["chat/1", "chat/2"], []);
const msg = useTopics(topicsArr);
return (
{JSON.stringify(msg, null, 2)}
);
}
```