Maintenance

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

mqtt-react

React Container for mqttjs/MQTT.js

Demo

There is a very minimalistic Demo-App: mqtt-react-demo

Usage

Currently, mqtt-react exports two enhancers. Similarly to react-redux, you'll have to first wrap a root component with a Connector which will initialize the mqtt instance and then subscribe to data by using subscribe.

Root component

The only property for the connector is the connection information for mqtt.Client#connect

Example Root component:

import { Connector } from 'mqtt-react';
import App from './components/App';

export default () => (
  <Connector mqttProps="ws://test.mosca.io/">
    <App />
  </Connector>
);

Subscribe

Example Subscribed component:

import { subscribe } from 'mqtt-react';

// Messages are passed on the "data" prop
const MessageList = (props) => (
  <ul>
    {props.data.map( message => <li>{message}</li> )}
  </ul>
);

// simple subscription to messages on the "@test/demo" topic
export default subscribe({
  topic: '@demo/test'
})(MessageList)

Example Posting Messages

MQTT Client is passed on to subscribed component and can be used to publish messages via mqtt.Client#publish

import React from 'react';
import { subscribe } from 'mqtt-react';

export class PostMessage extends React.Component {
    
  sendMessage(e) {
      e.preventDefault();
      //MQTT client is passed on
      const { mqtt } = this.props;
      mqtt.publish('@demo/test', 'My Message');
  }  
  
  render() {
    return (
      <button onClick={this.sendMessage.bind(this)}>
        Send Message
      </button>
    );
  }
}

export default subscribe({
  topic: '@demo/test'
})(PostMessage)

Advanced Susbcription / Integration with Redux:

It is possible to provide a function that handles received messages. By default the function adds the message to the data prop, but it can be used to dispatch actions to a redux store.

import { subscribe } from 'mqtt-react';
import store from './store';


const customDispatch = function(topic, message, packet) {
    store.dispatch(topic, message);
}


export default subscribe({
  topic: '@demo/test',
  dispatch: customDispatch
})

Credits

Sponsored by nearForm

Contributing

Pull Requests are very welcome!

If you find any issues, please report them via Github Issues!

Contributors

• Marc Höffl @KeKs0r

License

(MIT)