{"id":15656898,"url":"https://github.com/artcom/mqtt-topping-react","last_synced_at":"2025-05-05T15:29:57.725Z","repository":{"id":42432671,"uuid":"271315711","full_name":"artcom/mqtt-topping-react","owner":"artcom","description":"Wraps the Art+Com Mqtt Topping library for react.","archived":false,"fork":false,"pushed_at":"2025-04-07T15:34:54.000Z","size":1123,"stargazers_count":2,"open_issues_count":4,"forks_count":0,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-07T16:41:40.316Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/artcom.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-10T15:33:58.000Z","updated_at":"2023-03-31T07:30:34.000Z","dependencies_parsed_at":"2024-10-23T05:08:40.038Z","dependency_job_id":null,"html_url":"https://github.com/artcom/mqtt-topping-react","commit_stats":{"total_commits":67,"total_committers":5,"mean_commits":13.4,"dds":"0.10447761194029848","last_synced_commit":"4adb95f6639bcc2832854bb1fedf857e7fb9dd5c"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artcom%2Fmqtt-topping-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artcom%2Fmqtt-topping-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artcom%2Fmqtt-topping-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artcom%2Fmqtt-topping-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artcom","download_url":"https://codeload.github.com/artcom/mqtt-topping-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252523890,"owners_count":21761993,"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":[],"created_at":"2024-10-03T13:04:43.519Z","updated_at":"2025-05-05T15:29:57.687Z","avatar_url":"https://github.com/artcom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mqtt-topping-react\n\nWraps the [Art+Com Mqtt Topping](https://www.npmjs.com/package/@artcom/mqtt-topping) library for react. It provides multiple hooks and exposes the publish/unpublish methods.\n\n## Install\n\nThe package can be installed from [npmjs.com](https://www.npmjs.com/package/@artcom/mqtt-topping-react) via:\n\n```bash\nnpm install @artcom/mqtt-topping-react\n```\n\n## Usage\n\n### MQTT Context\n\nCreate an MQTT context with an MQTT and HTTP client.\n\n**Note:** The `unpublishRecursively` method as well as the `Query` methods need/use the HTTP client internally.\n\n```javascript\nimport React from \"react\"\nimport { connectAsync, createHttpClient, MqttProvider } from \"@artcom/mqtt-topping-react\"\n\nasync function start() {\n  const mqttClient = await connectAsync(\"ws://broker.test.local:1883\", { clientId: \"testClientId\" })\n  const httpClient = createHttpClient(\"http://broker.test.local:8080\")\n\n  render(\n    \u003cMqttProvider mqttClient={mqttClient} httpClient={httpClient}\u003e\n      // render app\n    \u003c/MqttProvider\u003e\n  )\n}\n\nstart()\n```\n\n### Connect\n\n**Note:** if you know your deviceId e.g. via url parameters please provide an appId aswell as the deviceId so debugging is a lot easier, otherwise you can just provide a clientId as seen in the example above\n\n```javascript\nconst mqttClient = await connectAsync(\"ws://broker.test.local:1883\", {\n  appId: \"testApp\",\n  deviceId: \"testDevice\",\n})\n```\n\n### Subscribe\n\n**Note:** Its mandatory to persist the handler (e.g. useCallback) otherwise a new subscription is made on every render.\n\n```javascript\nimport React, { useCallback } from \"react\"\nimport { useMqttSubscribe } from \"@artcom/mqtt-topping-react\"\n\nconst MyComponent = ({ greeting }) =\u003e {\n  const handler = useCallback((payload) =\u003e console.log(`${greeting} ${payload}`), [greeting])\n  useMqttSubscribe(\"myTopic\", handler)\n\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n### Publish\n\n```javascript\nimport React, { useContext } from \"react\"\nimport { MqttContext } from \"@artcom/mqtt-topping-react\"\n\nconst MyComponent = ({ payload }) =\u003e {\n  useContext(MqttContext).publish(\"myTopic\", payload)\n\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n### Unpublish\n\n```javascript\nimport React, { useContext } from \"react\"\nimport { MqttContext } from \"@artcom/mqtt-topping-react\"\n\nconst MyComponent = () =\u003e {\n  useContext(MqttContext).unpublish(\"myTopic\")\n\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n### UnpublishRecursively\n\n```javascript\nimport React, { useContext } from \"react\"\nimport { MqttContext } from \"@artcom/mqtt-topping-react\"\n\nconst MyComponent = () =\u003e {\n  useContext(MqttContext).unpublishRecursively(\"myTopic\")\n\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n### HTTP Queries\n\nTo query topics via the [retained topic HiveMQ plugin](https://github.com/artcom/hivemq-retained-message-query-plugin) the following hooks can be used. See the [async-task-hook documentation](https://github.com/artcom/async-task-hook) for details.\n\n#### Query\n\n```javascript\nimport React from \"react\"\nimport { useQuery, RUNNING, FINISHED, ERROR } from \"@artcom/mqtt-topping-react\"\n\nconst MyComponent = () =\u003e {\n  const query = useQuery({ topic: \"myTopic\", depth: 0, flatten: false, parseJson: true })\n\n  switch (query.status) {\n    case RUNNING:\n      return \u003c\u003eLoading...\u003c/\u003e\n    case FINISHED:\n      return \u003c\u003e{JSON.stringify(query.result)}\u003c/\u003e\n    case ERROR:\n      return \u003c\u003e{query.error.message}\u003c/\u003e\n  }\n}\n```\n\n#### Query Batch\n\n**Note:** Its mandatory to persist (e.g. memoize the queries) otherwise a new task is created on every rerender.\n\n```javascript\nimport React, { useMemo } from \"react\"\nimport { useQueryBatch, RUNNING, FINISHED, ERROR } from \"@artcom/mqtt-topping-react\"\n\nconst MyComponent = () =\u003e {\n  const queries = useMemo(\n    () =\u003e [\n      { topic: \"topic1\", depth: 1 },\n      { topic: \"topic2\", depth: 0 },\n    ],\n    []\n  )\n  const query = useQueryBatch(queries)\n\n  switch (query.status) {\n    case RUNNING:\n      return \u003c\u003eLoading...\u003c/\u003e\n    case FINISHED:\n      return \u003c\u003e{JSON.stringify(query.result)}\u003c/\u003e\n    case ERROR:\n      return \u003c\u003e{query.error.message}\u003c/\u003e\n  }\n}\n```\n\n#### Query Json\n\n```javascript\nimport React from \"react\"\nimport { useQueryJson, RUNNING, FINISHED, ERROR } from \"@artcom/mqtt-topping-react\"\n\nconst MyComponent = () =\u003e {\n  const query = useQueryJson(\"myTopic\")\n\n  switch (query.status) {\n    case RUNNING:\n      return \u003c\u003eLoading...\u003c/\u003e\n    case FINISHED:\n      return \u003c\u003e{JSON.stringify(query.result)}\u003c/\u003e\n    case ERROR:\n      return \u003c\u003e{query.error.message}\u003c/\u003e\n  }\n}\n```\n\n#### Query Json Batch\n\n**Note:** Its mandatory to persist (e.g. memoize the queries) otherwise a new task is created on every rerender.\n\n```javascript\nimport React, { useMemo } from \"react\"\nimport { useQueryJsonBatch, RUNNING, FINISHED, ERROR } from \"@artcom/mqtt-topping-react\"\n\nconst MyComponent = () =\u003e {\n  const queries = useMemo(() =\u003e [\"topic1\", \"topic2\"], [])\n  const query = useQueryJsonBatch(queries)\n\n  switch (query.status) {\n    case RUNNING:\n      return \u003c\u003eLoading...\u003c/\u003e\n    case FINISHED:\n      return \u003c\u003e{JSON.stringify(query.result)}\u003c/\u003e\n    case ERROR:\n      return \u003c\u003e{query.error.message}\u003c/\u003e\n  }\n}\n```\n\n## Development\n\n### Build\n\n```bash\nnpm install\nnpm run build\n```\n\n### Test\n\n```bash\nnpm install\nnpm run test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartcom%2Fmqtt-topping-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartcom%2Fmqtt-topping-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartcom%2Fmqtt-topping-react/lists"}