@visualsource/react-use-paho-mqtt
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
// main.tsx
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",
});
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
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