mqtt-react-hooks-services v0.1.2

Simple library to use MQTT in ReactJs project using hooks and services

This library was created to allow easy display of messages within any component using hooks and possibly services.

Hooks

import {useSetMqttConnection, useGetTopicData} from "mqtt-react-hooks-services/hooks"

• useSetMqttConnection – to set connection with mqtt broker and get status of connection ('online' or 'offline'); This hook allows you an easy connection and brings you the connection status, and it's normal to do it in your root component.

Example Hook connection status

import React from 'react';
import {useSetMqttConnection} from "mqtt-react-hooks-services/hooks";

function App() {
  const status = useSetMqttConnection('ws://broker.emqx.io:8083/mqtt');
  console.log('status connection', status);
  /*
   * Status list
   * - offline
   * - online
   */
  
    return (
      <div className="App">
        <h1>App component</h1>
      </div>
    );
  }

export default App;

• useGetTopicData – is used to subscribe a topic and get message from that topic;

Example Hook for subscribing and receiving messages

import React from 'react';
import {useGetTopicData} from "mqtt-react-hooks-services/hooks";

function ChildComponent() {
    
  const topic1 = useGetTopicData('topic1');
  const topic2 = useGetTopicData('topic2');
  console.log('Subscribe and get messages from topic1:', topic1, ' topic2:', topic2);
  
    return (
      <div className="ChildComponent">
        <h1>Child Component</h1>
        <p>topic1: {topic1}</p>
        <p>topic2: {topic2}</p>
      </div>
    );
  }

export default ChildComponent;

Services

import {mqttService} from "mqtt-react-hooks-services/services"

• mqttService.setConnection(url: string) – set connection with mqtt broker server;
• mqttService.getConnectionStatus() – get connection status ('online' or 'offline');

Example service connection and get status

import React, {useEffect} from 'react';
import {mqttService} from "mqtt-react-hooks-services/services";

function App() {

  useEffect(() => {
    mqttService.setConnection('ws://broker.emqx.io:8083/mqtt');
    
    let subscription: { unsubscribe: () => void; };
    subscription = mqttService.getConnectionStatus().subscribe(status => { 
      console.log('get connection status', status);
      /*
       * Status values
       * - true
       * - false
       */
      return () => {
        subcription.unsubscribe();
      }
    })
  }, []);
  
    return (
      <div className="App">
        <h1>App component</h1>
      </div>
    );
  }

export default App;

• mqttService.getTopicMessageRegister(topic: string) – subscribe a topic and get message from that topic;

Example Service for subscribing and receiving messages

import React, {useEffect} from 'react';
import {mqttService} from "mqtt-react-hooks-services/services"

function ChildComponent() {

  useEffect(() => {
    mqttService.getTopicMessageRegister('topic1').subscribe((message: string) => {
      console.log('Subscribe and get messages from topic1:', message);
    });
  })
  
  return (
      <div className="ChildComponent">
        <h1>Child Component</h1>
      </div>
    );
  }

export default ChildComponent;

• mqttService.publishMessage(topic: string, message: string) – publish message to a topic;

Example Service for publishing messages

import React from 'react';
import {mqttService} from "mqtt-react-hooks-services/services"

function ChildComponent() {
  return (
      <div className="ChildComponent">
        <h1>Child Component</h1>
        <button onClick={()=> mqttService.publishMessage('topic1', 'example published message')}>Publish Message</button>
      </div>
    );
  }

export default ChildComponent;

• mqttService.closeConnection() – close connection with broker server;

Example connection closing service

import React from 'react';
import {mqttService} from "mqtt-react-hooks-services/services"

function ChildComponent() {
  return (
      <div className="ChildComponent">
        <h1>Child Component</h1>
        <button onClick={()=> mqttService.closeConnection()}>Close Connection</button>
      </div>
    );
  }

export default ChildComponent;

License

MIT ©