@rubenchoi/react-mqtt v0.7.6

React MQTT Library

React library using mqttjs/MQTT.js

This repository contains:

• React library for MQTT client using mqtt.js with setting GUI
• Sample server
• Sample app

Install

npm install --save @rubenchoi/react-mqtt

Usage

import React from 'react'
import MqttComponent from '@rubenchoi/react-mqtt'

const App = () => {
  const [data, setData] = React.useState(undefined);
  const [counter, setCounter] = React.useState(1);
  const [connected, setConnected] = React.useState('Connected');

  const publish = () => {
    const date = new Date();
    const time = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
    const s = "TestData-" + (counter) + " ---- " + time;
    setData({ topic: 'TOPIC1', payload: s });
    setCounter(counter + 1);
  }

  return (<>
    <p>State: {connected}</p>
    <button style={{ margin: '2em' }} onClick={publish}>Send Data</button>
    {data && <span>[{data.topic}] {data.payload}</span>}
    <MqttComponent
      subscribeTo={[
        'TOPIC1', 'TOPIC2'
      ]}
      publish={data}
      callbacks={{
        onConnect: (isConnected = true) => setConnected(isConnected ? "Connected" : "Disconnected"),
        onMessage: (topic, payload) => {
          console.log("onMessage: topic=" + topic, payload);
        }
      }}
      settings={true}
      log={true}
    />
  </>)
}

Run Sample MQTT Broker,

  example/server$ npm install
  example/server$ node AedesBroker.js

  [aedes]http listening on port 8888
  [aedes]tls listening on port 1883

Tutorial

• MQTT Broker
• MQTT Client

License

MIT © rubenchoi

Credits

MQTT.js under MIT License, Ant Design under MIT License, react-create-library under MIT License