{"id":15063394,"url":"https://github.com/victorhas/mqtt-react-hooks","last_synced_at":"2025-10-05T02:31:30.084Z","repository":{"id":38172744,"uuid":"238828575","full_name":"VictorHAS/mqtt-react-hooks","owner":"VictorHAS","description":"ReactJS library for Pub/Sub communication with an MQTT broker using Hooks","archived":true,"fork":false,"pushed_at":"2023-02-04T11:50:26.000Z","size":1719,"stargazers_count":92,"open_issues_count":32,"forks_count":28,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-14T13:36:43.160Z","etag":null,"topics":["hooks","mqtt","mqtt-broker","mqtt-react-hooks","reactjs","topic"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VictorHAS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2020-02-07T02:34:39.000Z","updated_at":"2024-11-23T15:42:27.000Z","dependencies_parsed_at":"2023-02-08T18:01:39.841Z","dependency_job_id":null,"html_url":"https://github.com/VictorHAS/mqtt-react-hooks","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VictorHAS%2Fmqtt-react-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VictorHAS%2Fmqtt-react-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VictorHAS%2Fmqtt-react-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VictorHAS%2Fmqtt-react-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VictorHAS","download_url":"https://codeload.github.com/VictorHAS/mqtt-react-hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235356073,"owners_count":18976818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","mqtt","mqtt-broker","mqtt-react-hooks","reactjs","topic"],"created_at":"2024-09-24T23:56:01.582Z","updated_at":"2025-10-05T02:31:27.586Z","avatar_url":"https://github.com/VictorHAS.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/mqtt-react-hooks?color=blue)](https://www.npmjs.com/package/mqtt-react-hooks)\u003cspace\u003e\u003cspace\u003e\n[![Quality and Build](https://github.com/VictorHAS/mqtt-react-hooks/actions/workflows/publish.yml/badge.svg)](https://github.com/VictorHAS/mqtt-react-hooks/actions/workflows/publish.yml)\n\n\u003c/div\u003e\n\n## Overview\n\nThis library is focused in help you to connect, publish and subscribe to a Message Queuing Telemetry Transport (MQTT) in ReactJS with the power of React Hooks.\n\n## Flow of Data\n\n1. WiFi or other mobile sensors publish data to an MQTT broker\n2. ReactJS subscribes to the MQTT broker and receives the data using MQTT.js\n3. React's state is updated and the data is passed down to stateless components\n\n## Key features\n\n- React Hooks;\n- Beautiful syntax;\n- Performance focused;\n\n## Installation\n\nJust add mqtt-react-hooks to your project:\n\n```\nyarn add mqtt-react-hooks\n```\n\n### Hooks availables\n\n- useMqttState -\u003e return { connectionStatus, client, message }\n- useSubscription(topic: string | string[], options?: {} ) -\u003e return { client, topic, message, connectionStatus }\n\n### Usage\n\nCurrently, mqtt-react-hooks exports one enhancers.\nSimilarly to react-redux, you'll have to first wrap a root component with a\n`Connector` which will initialize the mqtt instance.\n\n#### Root component\n\nThe only property for the connector is the connection information for [mqtt.Client#connect](https://github.com/mqttjs/MQTT.js#connect)\n\n**Example Root component:**\n\n```js\nimport React from 'react';\n\nimport { Connector } from 'mqtt-react-hooks';\nimport Status from './Status';\n\nexport default function App() {\n  return (\n    \u003cConnector brokerUrl=\"wss://test.mosquitto.org:1884\"\u003e\n      \u003cStatus /\u003e\n    \u003c/Connector\u003e\n  );\n}\n```\n\n**Example Connection Status**\n\n```js\nimport React from 'react';\n\nimport { useMqttState } from 'mqtt-react-hooks';\n\nexport default function Status() {\n  /*\n   * Status list\n   * - Offline\n   * - Connected\n   * - Reconnecting\n   * - Closed\n   * - Error: printed in console too\n   */\n  const { connectionStatus } = useMqttState();\n\n  return \u003ch1\u003e{`Status: ${connectionStatus}`}\u003c/h1\u003e;\n}\n```\n\n#### Subscribe\n\n**Example Posting Messages**\n\nMQTT Client is passed on useMqttState and can be used to publish messages via\n[mqtt.Client#publish](https://github.com/mqttjs/MQTT.js#publish) and don't need Subscribe\n\n```js\nimport React from 'react';\nimport { useMqttState } from 'mqtt-react-hooks';\n\nexport default function Status() {\n  const { client } = useMqttState();\n\n  function handleClick(message) {\n    return client.publish('esp32/led', message);\n  }\n\n  return (\n    \u003cbutton type=\"button\" onClick={() =\u003e handleClick('false')}\u003e\n      Disable led\n    \u003c/button\u003e\n  );\n}\n```\n\n**Example Subscribing and Receiving messages**\n\n```js\nimport React from 'react';\n\nimport { useSubscription } from 'mqtt-react-hooks';\n\nexport default function Status() {\n  /* Message structure:\n   *  topic: string\n   *  message: string\n   */\n  const { message } = useSubscription([\n    'room/esp32/testing',\n    'room/esp32/light',\n  ]);\n\n  return (\n    \u003c\u003e\n      \u003cdiv style={{ display: 'flex', flexDirection: 'column' }}\u003e\n        \u003cspan\u003e{`topic:${message.topic} - message: ${message.message}`}\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Tips\n\n1. If you need to change the format in which messages will be inserted in message useState, you can pass the option of parserMethod in the Connector:\n\n```js\nimport React, { useEffect, useState } from 'react';\nimport { Connector, useSubscription } from 'mqtt-react-hooks';\n\nconst Children = () =\u003e {\n  const { message, connectionStatus } = useSubscription('esp32/testing/#');\n  const [messages, setMessages] = useState \u003c any \u003e [];\n\n  useEffect(() =\u003e {\n    if (message) setMessages((msgs: any) =\u003e [...msgs, message]);\n  }, [message]);\n\n  return (\n    \u003c\u003e\n      \u003cspan\u003e{connectionStatus}\u003c/span\u003e\n      \u003chr /\u003e\n      \u003cspan\u003e{JSON.stringify(messages)}\u003c/span\u003e\n    \u003c/\u003e\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cConnector\n      brokerUrl=\"wss://test.mosquitto.org:1884\"\n      parserMethod={msg =\u003e msg} // msg is Buffer\n    \u003e\n      \u003cChildren /\u003e\n    \u003c/Connector\u003e\n  );\n};\n```\n\n## Contributing\n\nThanks for being interested on making this package better. We encourage everyone to help improving this project with some new features, bug fixes and performance issues. Please take a little bit of your time to read our guides, so this process can be faster and easier.\n\n## License\n\nMIT ©\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorhas%2Fmqtt-react-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictorhas%2Fmqtt-react-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorhas%2Fmqtt-react-hooks/lists"}