feat: add custom parser for incoming mqtt message

Author: erich2s

.changeset/eleven-points-work.md

@@ -0,0 +1,5 @@
+---
+"react-mqtt-hooks": minor
+---
+
+feat: add custom parser for incoming mqtt message

README.md

@@ -70,7 +70,7 @@ pnpm add react-mqtt-hooks mqtt
 
 ### `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) to the context. It also handles the connection and disconnection of the client.
+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.
 

src/contexts/mqtt-connector.tsx

@@ -1,5 +1,6 @@
 "use client";
 import type { IClientOptions } from "mqtt";
+import type { Buffer } from "node:buffer";
 import type { MqttClientType } from "./mqtt-context";
 import mqtt from "mqtt";
 import { useEffect, useState } from "react";
@@ -10,23 +11,25 @@ type MqttConnectorProps = {
   children: React.ReactNode;
   url: string;
   options?: IClientOptions;
+  customParser?: (message: Buffer) => any;
 };
 
-export function MqttConnector({ children, url, options }: MqttConnectorProps) {
+export function MqttConnector({ children, url, options, customParser }: MqttConnectorProps) {
   const [mqttClient, setMqttClient] = useState<MqttClientType>(null);
   const cache = MqttCache.getInstance();
   useEffect(() => {
     const client = mqtt.connect(url, options);
     setMqttClient(client);
     client.on("connect", () => {
       cache.setClient(client);
+      cache.setCustomParser(customParser);
     });
 
     return () => {
       cache.setClient(null);
       client.end();
     };
-  }, [url, options, cache]);
+  }, [url, options, cache, customParser]);
   return (
     // disable this rule to make it compatible with React 18
     // eslint-disable-next-line react/no-context-provider

src/index.ts

@@ -3,6 +3,5 @@ import { MqttConnector } from "./contexts/mqtt-connector";
 import useMqttClient from "./hooks/use-mqtt-client";
 import useTopic from "./hooks/use-topic";
 import useTopics from "./hooks/use-topics";
-// import { MqttCache } from "./internals/mqtt-cache";
 
 export { MqttConnector, useMqttClient, useTopic, useTopics };

src/internals/mqtt-cache.ts

@@ -11,9 +11,10 @@ export type CacheItem<T> = {
 // Global cache for MQTT messages
 export class MqttCache {
   private static instance: MqttCache;
-  cache = new Map<string, CacheItem<any>>();
-  private mqttClient: MqttClient | null = null;
+  private cache = new Map<string, CacheItem<any>>();
   private observers: Map<string, Set<Function>> = new Map();
+  private mqttClient: MqttClient | null = null;
+  private customParser: ((message: Buffer) => any) | undefined = undefined;
 
   static getInstance(): MqttCache {
     if (!MqttCache.instance) {
@@ -29,12 +30,16 @@ export class MqttCache {
     }
   }
 
+  setCustomParser(parser: ((message: Buffer) => any) | undefined) {
+    this.customParser = parser;
+  }
+
   private setupMessageListener() {
     if (!this.mqttClient) {
       return;
     }
     this.mqttClient.on("message", (topic: string, message: Buffer) => {
-      const parsedMsg = parseMessage(message);
+      const parsedMsg = this.customParser ? this.customParser(message) : parseMessage(message);
       this.setData(topic, parsedMsg);
       this.notifyObservers(topic, parsedMsg);
     });