@robot.com/better-mqtt/react.js

A modern, TypeScript-first MQTT client library that provides a better developer experience with async iterators, shared subscriptions, and React hooks. Better MQTT is a wrapper around the excellent [mqtt.js](https://github.com/mqttjs/MQTT.js) library, enh

// src/react/index.tsx
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useRef,
  useState
} from "react";
import { jsx } from "react/jsx-runtime";
var ctx = createContext(null);
function BetterMQTTProvider(props) {
  return /* @__PURE__ */ jsx(ctx.Provider, { value: props.client, children: props.children });
}
function useMQTT() {
  const client = useContext(ctx);
  if (!client) {
    throw new Error("useMQTT must be used within MQTTProvider");
  }
  return client;
}
function useMQTTStatus() {
  const client = useMQTT();
  const [status, setStatus] = useState(client.status);
  useEffect(() => {
    const listener = client.on("status", setStatus);
    return () => {
      client.off("status", listener);
    };
  }, [client]);
  return status;
}
function useMQTTSubscription(topic, parser, onMessage, opts) {
  const client = useMQTT();
  const onMessageRef = useRef(onMessage);
  onMessageRef.current = onMessage;
  const parserRef = useRef(parser);
  parserRef.current = parser;
  const parserMemoed = useCallback((message) => {
    return parserRef.current(message);
  }, []);
  useEffect(() => {
    if (opts?.enabled === false) {
      return;
    }
    const sub = client.subscribe(topic, parserMemoed);
    sub.on("message", (message) => {
      onMessageRef.current(message.content);
    });
    return () => {
      sub.end();
    };
  }, [client, topic, parserMemoed, opts?.enabled]);
}
function useMQTTError(onError) {
  const client = useMQTT();
  const [error, setError] = useState(null);
  useEffect(() => {
    const listener = (err) => {
      setError(err);
      onError(err);
    };
    client.on("error", listener);
    return () => {
      client.off("error", listener);
    };
  }, [client, onError]);
  return error;
}
export {
  BetterMQTTProvider,
  useMQTT,
  useMQTTError,
  useMQTTStatus,
  useMQTTSubscription
};
//# sourceMappingURL=react.js.map