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.
React Container for mqttjs/MQTT.js
There is a very minimalistic Demo-App: mqtt-react-demo
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.
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>
);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
})Sponsored by nearForm
Pull Requests are very welcome!
If you find any issues, please report them via Github Issues!
- Marc Höffl @KeKs0r
(MIT)