Skip to content

Pub/Sub communication with an MQTT broker using React Hooks

License

Notifications You must be signed in to change notification settings

almond-hydroponics/mqtt-hooks

Repository files navigation

mqtt-react-hooks

CI CircleCI Maintainability Test Coverage Language grade: JavaScript

Pub/Sub communication with an MQTT broker using React Hooks

Almond

Simple but complicated mqtt hook

Overview

This library is focused to help you to connect, publish and subscribe to a Message Queuing Telemetry Transport (MQTT) in ReactJS with the power of React Hooks. The library is a modification of mqtt-react-hooks found here.

Flow of Data

  1. WiFi or other mobile sensors publish data to an MQTT broker
  2. ReactJS subscribes to the MQTT broker and receives the data using MQTT.js
  3. React's state is updated, and the data is passed down to stateless components

Hooks Available

  • useMqttState -> return { status, mqtt, allMessages, lastMessage }
  • useSubscription(topic) -> return { msgs, mqtt, status, lastMessage, lastMessageOnTopic }

Usage

Currently, mqtt-react-hooks exports one enhancers. Similarly to react-redux, you'll have to first wrap a root component with a Connector which will initialize the mqtt instance.