{"id":13802264,"url":"https://github.com/KeKs0r/mqtt-react","last_synced_at":"2025-05-13T13:30:26.829Z","repository":{"id":20518636,"uuid":"90137536","full_name":"KeKs0r/mqtt-react","owner":"KeKs0r","description":"React container for MQTT","archived":false,"fork":false,"pushed_at":"2023-01-12T06:51:40.000Z","size":260,"stargazers_count":48,"open_issues_count":23,"forks_count":31,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-09T13:56:32.566Z","etag":null,"topics":["mqtt","mqtt-client","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KeKs0r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-03T10:33:33.000Z","updated_at":"2025-02-02T21:22:30.000Z","dependencies_parsed_at":"2023-01-14T13:04:54.860Z","dependency_job_id":null,"html_url":"https://github.com/KeKs0r/mqtt-react","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeKs0r%2Fmqtt-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeKs0r%2Fmqtt-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeKs0r%2Fmqtt-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeKs0r%2Fmqtt-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KeKs0r","download_url":"https://codeload.github.com/KeKs0r/mqtt-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253949901,"owners_count":21989269,"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":["mqtt","mqtt-client","react"],"created_at":"2024-08-04T00:01:40.595Z","updated_at":"2025-05-13T13:30:26.519Z","avatar_url":"https://github.com/KeKs0r.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.org/KeKs0r/mqtt-react.svg?branch=master)](https://travis-ci.org/KeKs0r/mqtt-react)\n\n# Maintenance\nI am not using this library, so it is really hard to maintain it, without knowing the use cases. If someone is interested in taking it over or supporting the maintenance. Please reach out to me. My email is on my profile.\n\n# mqtt-react\nReact Container for [mqttjs/MQTT.js](https://github.com/mqttjs/MQTT.js)\n\n\u003c!--\n### Installation\n```\nnpm i -S mqtt-react\n```\n--\u003e\n\n## Demo\nThere is a very minimalistic Demo-App: [mqtt-react-demo](https://github.com/KeKs0r/mqtt-react-demo)\n\n### Usage\nCurrently, mqtt-react exports two enhancers.\nSimilarly to react-redux, you'll have to first wrap a root component with a\n```Connector``` which will initialize the mqtt instance and then subscribe to\ndata by using ```subscribe```.\n\n#### Root component\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```JavaScript\nimport { Connector } from 'mqtt-react';\nimport App from './components/App';\n\nexport default () =\u003e (\n  \u003cConnector mqttProps=\"ws://test.mosca.io/\"\u003e\n    \u003cApp /\u003e\n  \u003c/Connector\u003e\n);\n```\n\n#### Subscribe \n**Example Subscribed component:**\n```JavaScript\nimport { subscribe } from 'mqtt-react';\n\n// Messages are passed on the \"data\" prop\nconst MessageList = (props) =\u003e (\n  \u003cul\u003e\n    {props.data.map( message =\u003e \u003cli\u003e{message}\u003c/li\u003e )}\n  \u003c/ul\u003e\n);\n\n// simple subscription to messages on the \"@test/demo\" topic\nexport default subscribe({\n  topic: '@demo/test'\n})(MessageList)\n```\n\n\n**Example Posting Messages**\n\nMQTT Client is passed on to subscribed component and can be used to publish messages via\n[mqtt.Client#publish](https://github.com/mqttjs/MQTT.js#publish)\n\n```JavaScript\nimport React from 'react';\nimport { subscribe } from 'mqtt-react';\n\nexport class PostMessage extends React.Component {\n    \n  sendMessage(e) {\n      e.preventDefault();\n      //MQTT client is passed on\n      const { mqtt } = this.props;\n      mqtt.publish('@demo/test', 'My Message');\n  }  \n  \n  render() {\n    return (\n      \u003cbutton onClick={this.sendMessage.bind(this)}\u003e\n        Send Message\n      \u003c/button\u003e\n    );\n  }\n}\n\nexport default subscribe({\n  topic: '@demo/test'\n})(PostMessage)\n```\n\n**Advanced Susbcription / Integration with Redux:**\n\nIt is possible to provide a function that handles received messages. \nBy default the function adds the message to the data prop, but it can be used to dispatch actions to a redux store.\n```JavaScript\nimport { subscribe } from 'mqtt-react';\nimport store from './store';\n\n\nconst customDispatch = function(topic, message, packet) {\n    store.dispatch(topic, message);\n}\n\n\nexport default subscribe({\n  topic: '@demo/test',\n  dispatch: customDispatch\n})\n```\n\n## Credits\nSponsored by \u003ca href=\"http://nearform.com\"\u003enearForm\u003c/a\u003e\n\n### Contributing\n\nPull Requests are very welcome!\n\nIf you find any issues, please report them via [Github Issues](https://github.com/KeKs0r/mqtt-react/issues)!\n\n### Contributors\n- Marc Höffl [@KeKs0r](https://github.com/KeKs0r)\n\n### License\n(MIT)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKeKs0r%2Fmqtt-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKeKs0r%2Fmqtt-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKeKs0r%2Fmqtt-react/lists"}