https://github.com/visualsource/react-use-paho-mqtt
React Wrapper for the the javascript Paho MQTT library
https://github.com/visualsource/react-use-paho-mqtt
Last synced: 5 months ago
JSON representation
React Wrapper for the the javascript Paho MQTT library
- Host: GitHub
- URL: https://github.com/visualsource/react-use-paho-mqtt
- Owner: VisualSource
- License: mit
- Created: 2024-04-08T21:59:45.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-06T19:30:22.000Z (9 months ago)
- Last Synced: 2025-01-31T05:03:47.682Z (5 months ago)
- Language: TypeScript
- Homepage: https://visualsource.github.io/react-use-paho-mqtt/docs
- Size: 176 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React use Paho Mqtt
[](https://choosealicense.com/licenses/mit/)
React Wrapper for the the javascript [Paho MQTT library](https://www.npmjs.com/package/paho-mqtt)
## Installation
Install react-use-paho-mqtt
#### NPM
```bash
npm install @visualsource/react-use-paho-mqtt paho-mqtt
npm install @types/paho-mqtt -D
```
#### PNPM
```bash
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
```bash
npm install paho-mqtt
npm install @types/paho-mqtt -D
```
#### PNPM
```bash
pnpm add paho-mqtt
pnpm add @types/paho-mqtt -D
```
```tsx
// 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(
);
// 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 (
{
mqtt.publish("/message/example", "Payload");
}}
>
Btn
);
}
```
### Custom MQTT Client Eample
```tsx
// 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(
);
// 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 (
{
mqtt.publish("/message/example", "Payload");
}}
>
Btn
);
}
```
## Documentation
[Documentation](https://visualsource.github.io/react-use-paho-mqtt/docs)
## Demo
[Demo](https://visualsource.github.io/react-use-paho-mqtt/demo)
## Run Example Locally
Clone the project
```bash
git clone https://github.com/VisualSource/react-use-paho-mqtt
```
Go to the project directory
```bash
cd react-use-paho-mqtt
```
```bash
pnpm install
```
```bash
pnpm build
```
```bash
pnpm preview
```
## Running Tests
To run tests, run the following command
```bash
pnpm test
```
## Authors
- [@VisualSource](https://www.github.com/visualsource)
## License
[MIT](https://choosealicense.com/licenses/mit/)
## Acknowledgements
- [Test Mosquitto Broker](https://test.mosquitto.org/)
- [Core MQTT Library](https://www.npmjs.com/package/paho-mqtt)
- [mqtt-pattern](https://www.npmjs.com/package/mqtt-pattern)