React use Paho Mqtt

React Wrapper for the the javascript Paho MQTT library

Installation

Install react-use-paho-mqtt

NPM

  npm install @visualsource/react-use-paho-mqtt paho-mqtt
  npm install @types/paho-mqtt -D

PNPM

  pnpm add @visualsource/react-use-paho-mqtt paho-mqtt 
  pnpm add @types/paho-mqtt -D

Usage/Examples

Paho MQTT Example

Make sure to install the paho-mqtt library

NPM

  npm install paho-mqtt
  npm install @types/paho-mqtt -D

PNPM

  pnpm add paho-mqtt 
  pnpm add @types/paho-mqtt -D

// main.tsx
import MQTT from "paho-mqtt";
import { MQTTClient, MqttProvider } from "@visualsource/react-use-paho-mqtt";

const client = new MQTTClient({
  host: "test.mosquitto.org",
  useSSL: true,
  port: 8091,
  userName: "ro",
  password: "readonly",
},MQTT.Client);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MqttProvider client={client}>
      <App />
    </MqttProvider>
  </React.StrictMode>
);

// App.tsx
import {
  useSubscription,
  useMqtt,
  type MessageEvent,
} from "@visualsource/react-use-paho-mqtt";

function App() {
  const mqtt = useMqtt();
  const onMessage = useCallback((ev: MessageEvent) => {
    const { payloadString, destinationName } = ev.detail;
    console.log(`Topic ${destinationName}, Payload: ${payloadString}`)
  },[]);

  useSubscription("/message/example", onMessage);

  return (
    <button
      onClick={() => {
        mqtt.publish("/message/example", "Payload");
      }}
    >
      Btn
    </button>
  );
}

Custom MQTT Client Eample

// main.tsx
import { MQTTClient, MqttProvider, type IClient } from "@visualsource/react-use-paho-mqtt";

class MQTTClientImplemention implements IClient {
  // implement required methods and properties
  // See documention for details.
}

const client = new MQTTClient({
  host: "test.mosquitto.org",
  useSSL: true,
  port: 8091,
  userName: "ro",
  password: "readonly",
},MQTTClientImplemention);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MqttProvider client={client}>
      <App />
    </MqttProvider>
  </React.StrictMode>
);

// App.tsx
import {
  useSubscription,
  useMqtt,
  type MessageEvent,
} from "@visualsource/react-use-paho-mqtt";

function App() {
  const mqtt = useMqtt();
  const onMessage = useCallback((ev: MessageEvent) => {
    const { payloadString, destinationName } = ev.detail;
    console.log(`Topic ${destinationName}, Payload: ${payloadString}`)
  },[]);

  useSubscription("/message/example", onMessage);

  return (
    <button
      onClick={() => {
        mqtt.publish("/message/example", "Payload");
      }}
    >
      Btn
    </button>
  );
}

Documentation

Documentation

Demo

Demo

Run Example Locally

Clone the project

  git clone https://github.com/VisualSource/react-use-paho-mqtt

Go to the project directory

  cd react-use-paho-mqtt

  pnpm install

  pnpm build

  pnpm preview

Running Tests

To run tests, run the following command

  pnpm test

Authors

• @VisualSource

License

MIT

Acknowledgements

• Test Mosquitto Broker
• Core MQTT Library
• mqtt-pattern