{"id":24979894,"url":"https://github.com/flow-build/react-mqtt-workflow-manager","last_synced_at":"2026-05-02T14:32:34.724Z","repository":{"id":143334234,"uuid":"607706412","full_name":"flow-build/react-mqtt-workflow-manager","owner":"flow-build","description":"A react wrapper manager for MQTT","archived":false,"fork":false,"pushed_at":"2023-04-14T14:13:43.000Z","size":2528,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-08T04:36:38.141Z","etag":null,"topics":["flowbuild","mqtt","mqtt-client","react","workflow","workflow-api","workflow-manager"],"latest_commit_sha":null,"homepage":"https://flowbuild.io","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/flow-build.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-02-28T14:16:06.000Z","updated_at":"2023-03-27T14:17:00.000Z","dependencies_parsed_at":"2024-11-15T19:28:57.862Z","dependency_job_id":"c4e10eef-90fa-42f2-9eb6-9a9632a583d2","html_url":"https://github.com/flow-build/react-mqtt-workflow-manager","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flow-build%2Freact-mqtt-workflow-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flow-build%2Freact-mqtt-workflow-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flow-build%2Freact-mqtt-workflow-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flow-build%2Freact-mqtt-workflow-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flow-build","download_url":"https://codeload.github.com/flow-build/react-mqtt-workflow-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246168086,"owners_count":20734389,"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":["flowbuild","mqtt","mqtt-client","react","workflow","workflow-api","workflow-manager"],"created_at":"2025-02-04T04:15:28.014Z","updated_at":"2026-05-02T14:32:34.660Z","avatar_url":"https://github.com/flow-build.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# React MQTT Workflow Manager\n\nReact MQTT Workflow Manager is a React component library designed to wrap all the [MQTT](https://mqtt.org/) sub-logic behind the scenes and must be used to work with [Workflow API Layer](https://github.com/flow-build/workflow-api). It only deals with events, not commands. The manager communicates with your broker to dispatch actions in your front-end application.\n\n## Table of contents\n\n - [Installation](#installation)\n - [Dependencies](#dependencies)\n - [Usage](#usage)\n - [Example of usage](#example-of-usage)\n - [Properties](#properties)\n - [WorkflowManagerConfig](#workflowmanagerconfig)\n - [Hooks](#hooks)\n - [Running locally](#running-locally)\n - [Authors](#authors)\n - [License](#license)\n\n## [Installation](installation)\n\n```bash\nnpm install @flowbuild/react-mqtt-workflow-manager --save\n```\nor\n\n```bash\nyarn add @flowbuild/react-mqtt-workflow-manager\n```\n## [Dependencies](dependencies)\n\nThe `WorkflowManager` component [peer depends](https://docs.npmjs.com/files/package.json#peerdependencies) on the [React](https://www.npmjs.com/package/react) and [React DOM](https://www.npmjs.com/package/react-dom) in version 18.\n\n```bash\nnpm i react@18 react-dom@18\n```\n## [Usage](usage)\n\n\n1. Before using the component, set the store with `WorkflowManagerConfig.setStore`.\n\n```tsx\n// App.tsx\n\nimport * as React from 'react';\n\nimport { WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';\n\nimport { store } from './store'; // Your redux store\n\n\nWorkflowManagerConfig.setStore(store);\n\n// ...\n```\n\n2. Wrap your application with `WorkflowManager`.\n\n```tsx\n// App.tsx\n\nimport * as React from 'react';\n\nimport { Provider } from 'react-redux';\nimport { WorkflowManager, WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';\n\nimport { store } from './store'; // Your redux store\n\n\nWorkflowManagerConfig.setStore(store);\n\nexport const App: React.FC = () =\u003e {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cWorkflowManager\n        brokerUrl=\"ws://broker.mqttdashboard.com:8000/mqtt\"\n        options={{\n          clientId: `clientId-${Math.random().toString(36).substring(2, 9)}`,\n          keepalive: 60,\n        }}\n      \u003e\n        {/* Your child component here */}\n      \u003c/WorkflowManager\u003e\n    \u003c/Provider\u003e\n  );\n};\n```\n\n3. Lastly, set `workflowManagerReducer` on your store reducers.\n\n```ts\nimport { configureStore, createSlice } from '@reduxjs/toolkit';\n\nimport { workflowManagerReducer, WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';\n\nconst myAppSlice = createSlice({\n  name: '@myApp',\n  ...\n});\n\nexport const store = configureStore({\n  reducer: { myApp: myAppSlice.reducer, workflowManagerReducer },\n});\n\n```\n\n## [Example of usage](example-of-usage)\n\nA complete example of how to use it can be found [here](https://github.com/flow-build/react-mqtt-workflow-manager/tree/master/app/).\n\n## [Properties](properties)\n\nProperty          | Type             | Required             | Description\n---               | ---              | ---                  | ---\n`brokerUrl`       | *string*         | true                 | URL to connect to broker. Use full URL like `wss://...`\n`options`         | *IClientOptions* | false                | MQTT client options. See options config [here](https://github.com/mqttjs/MQTT.js/blob/main/types/lib/client-options.d.ts).\n\n## [WorkflowManagerConfig](workflowmanagerconfig)\n\nThe library also provides methods and utilities for your commodity. They can be used outside the context of react components.\n\n### setStore(store)\n\nThe library uses your redux store to dispatch actions. This is used to control and dispatch internal actions for your application.\n\n### getMqttClient()\n\nA utility method that can be used outside the context of react components. Be careful; the method must be able to return `null` if an error occurs when setting connect. See client config [here](https://github.com/mqttjs/MQTT.js/blob/main/README.md#client).\n\n### subscribe(topic/topic array/topic object, [options])\n\nWorks exactly like [mqtt#subscribe](https://github.com/mqttjs/MQTT.js/blob/main/README.md#mqttclientsubscribetopictopic-arraytopic-object-options-callback), but the library implements validations and internal rules.\n\n### subscribe(topic/topic array/topic object, [options])\n\nWorks exactly like [mqtt#unsubscribe](https://github.com/mqttjs/MQTT.js/blob/main/README.md#mqttclientunsubscribetopictopic-array-options-callback), but the library implements validations and internal rules.\n\n## [Hooks](hooks)\n\nSome hooks are exported for commodity.\n\n### useMqtt()\n\nThe hook returns a object contaning `client`, `status` and `error`.\n\nProperty          | Type             | Default value    | Description\n---               | ---              | ---              | ---\n`client`          | *MqttClient*     | `null`           | See client [here](https://github.com/mqttjs/MQTT.js/blob/main/types/lib/client.d.ts).\n`status`          | *string*         | `offline`        | `connecting`, `connected`, `disconnected`, `reconnecting`, `offline` or `error`.\n`error`           | *Error*          | `null` |\n\n### useSubscribe()\n\nReturns `WorkflowManagerConfig.subscribe` for your commodity.\n\n### useUnsubscribe()\n\nReturns `WorkflowManagerConfig.unsubscribe` for your commodity.\n\n## [Running locally](running-locally)\n\nClone the project\n\n```bash\ngit clone https://github.com/flow-build/react-mqtt-workflow-manager.git\n```\n\nGo to the project directory\n\n```bash\ncd react-mqtt-workflow-manager\n```\n\nInstall dependencies\n\n```bash\nnpm install\n```\n\nStart the development server\n\n```bash\nnpm run dev\n```\n\nGo to the project example directory\n\n```bash\ncd app\n```\n\nInstall de example dependencies\n\n```bash\nnpm install\n```\n\nStart the example application\n\n```bash\nnpm run start\n```\n\n\n## [Authors](authors)\n\n[@wallace-sf](https://www.github.com/wallace-sf)\n\n\n## [License](license)\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflow-build%2Freact-mqtt-workflow-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflow-build%2Freact-mqtt-workflow-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflow-build%2Freact-mqtt-workflow-manager/lists"}