{"id":15163277,"url":"https://github.com/andybuibui/rc-mqtt","last_synced_at":"2026-02-03T23:04:41.241Z","repository":{"id":239139600,"uuid":"798632888","full_name":"andybuibui/rc-mqtt","owner":"andybuibui","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-10T10:18:57.000Z","size":682,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T03:10:57.136Z","etag":null,"topics":[],"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/andybuibui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-10T07:00:13.000Z","updated_at":"2024-05-10T09:29:12.000Z","dependencies_parsed_at":"2024-09-13T19:15:09.491Z","dependency_job_id":null,"html_url":"https://github.com/andybuibui/rc-mqtt","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":"0.19999999999999996","last_synced_commit":"68f707d66d4b525e7c247d8cb224a323c25373f7"},"previous_names":["andybuibui/rc-mqtt"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/andybuibui/rc-mqtt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andybuibui%2Frc-mqtt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andybuibui%2Frc-mqtt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andybuibui%2Frc-mqtt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andybuibui%2Frc-mqtt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andybuibui","download_url":"https://codeload.github.com/andybuibui/rc-mqtt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andybuibui%2Frc-mqtt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29060651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T22:28:58.191Z","status":"ssl_error","status_checked_at":"2026-02-03T22:28:56.515Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-09-27T02:22:21.402Z","updated_at":"2026-02-03T23:04:41.227Z","avatar_url":"https://github.com/andybuibui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n[![NPM version](https://img.shields.io/npm/v/rc-mqtt.svg?style=flat)](https://www.npmjs.org/package/rc-mqtt) [![NPM Downloads](https://img.shields.io/npm/dm/rc-mqtt.svg)](https://npmcharts.com/compare/rc-mqtt?minimal=true) [![jsDelivr Downloads](https://data.jsdelivr.com/v1/package/npm/rc-mqtt/badge?style=rounded)](https://www.jsdelivr.com/package/npm/rc-mqtt) [![License](https://img.shields.io/npm/l/rc-mqtt.svg)](https://github.com/andybuibui/rc-mqtt/blob/main/LICENSE)\n\n\u003c/div\u003e\n\n## rc-mqtt\n\n[中文说明](https://github.com/andybuibui/rc-mqtt/blob/main/README.zh-CN.md)\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## Installation\n\nJust add rc-mqtt to your project:\n\n```\nyarn add rc-mqtt\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, rc-mqtt 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.\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 'rc-mqtt';\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 'rc-mqtt';\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 [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 'rc-mqtt';\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 'rc-mqtt';\n\nexport default function Status() {\n  /* Message structure:\n   *  topic: string\n   *  message: string\n   */\n  const { message } = useSubscription(['room/esp32/testing', 'room/esp32/light']);\n\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{`topic:${message.topic} - message: ${message.message}`}\u003c/span\u003e\n    \u003c/div\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 'rc-mqtt';\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandybuibui%2Frc-mqtt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandybuibui%2Frc-mqtt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandybuibui%2Frc-mqtt/lists"}