@flowbuild/react-mqtt-workflow-manager
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

React MQTT Workflow Manager

React MQTT Workflow Manager is a React component library designed to wrap all the MQTT sub-logic behind the scenes and must be used to work with Workflow API Layer. It only deals with events, not commands. The manager communicates with your broker to dispatch actions in your front-end application.

Table of contents

Installation

npm install @flowbuild/react-mqtt-workflow-manager --save

or

yarn add @flowbuild/react-mqtt-workflow-manager

Dependencies

The WorkflowManager component peer depends on the React and React DOM in version 18.

npm i react@18 react-dom@18

Usage

  1. Before using the component, set the store with WorkflowManagerConfig.setStore.
// App.tsx

import * as React from 'react';

import { WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';

import { store } from './store'; // Your redux store


WorkflowManagerConfig.setStore(store);

// ...
  1. Wrap your application with WorkflowManager.
// App.tsx

import * as React from 'react';

import { Provider } from 'react-redux';
import { WorkflowManager, WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';

import { store } from './store'; // Your redux store


WorkflowManagerConfig.setStore(store);

export const App: React.FC = () => {
  return (
    <Provider store={store}>
      <WorkflowManager
        brokerUrl="ws://broker.mqttdashboard.com:8000/mqtt"
        options={{
          clientId: `clientId-${Math.random().toString(36).substring(2, 9)}`,
          keepalive: 60,
        }}
      >
        {/* Your child component here */}
      </WorkflowManager>
    </Provider>
  );
};
  1. Lastly, set workflowManagerReducer on your store reducers.
import { configureStore, createSlice } from '@reduxjs/toolkit';

import { workflowManagerReducer, WorkflowManagerConfig } from '@flowbuild/react-mqtt-workflow-manager';

const myAppSlice = createSlice({
  name: '@myApp',
  ...
});

export const store = configureStore({
  reducer: { myApp: myAppSlice.reducer, workflowManagerReducer },
});

Example of usage

A complete example of how to use it can be found here.

Properties

Property Type Required Description
brokerUrl string true URL to connect to broker. Use full URL like wss://...
options IClientOptions false MQTT client options. See options config here.

WorkflowManagerConfig

The library also provides methods and utilities for your commodity. They can be used outside the context of react components.

setStore(store)

The library uses your redux store to dispatch actions. This is used to control and dispatch internal actions for your application.

getMqttClient()

A 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.

subscribe(topic/topic array/topic object, [options])

Works exactly like mqtt#subscribe, but the library implements validations and internal rules.

subscribe(topic/topic array/topic object, [options])

Works exactly like mqtt#unsubscribe, but the library implements validations and internal rules.

Hooks

Some hooks are exported for commodity.

useMqtt()

The hook returns a object contaning client, status and error.

Property Type Default value Description
client MqttClient null See client here.
status string offline connecting, connected, disconnected, reconnecting, offline or error.
error Error null

useSubscribe()

Returns WorkflowManagerConfig.subscribe for your commodity.

useUnsubscribe()

Returns WorkflowManagerConfig.unsubscribe for your commodity.

Running locally

Clone the project

git clone https://github.com/flow-build/react-mqtt-workflow-manager.git

Go to the project directory

cd react-mqtt-workflow-manager

Install dependencies

npm install

Start the development server

npm run dev

Go to the project example directory

cd app

Install de example dependencies

npm install

Start the example application

npm run start

Authors

@wallace-sf

License

MIT

Package Sidebar

Install

npm i @flowbuild/react-mqtt-workflow-manager

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

103 kB

Total Files

29

Last publish

Collaborators

  • imagure
  • lucas.biason.fdte
  • wallace.silva.ferreira
  • ricardo.imagure
  • pedropereiraassis
  • fdte_pcasari
  • gustavo_fdte
  • rafgoncalves
  • elson_oliveira
  • bot.flowbuild