React Container for mqttjs/MQTT.js
using npm:
npm install --save react-mqtt-client
using yarn:
yarn add react-mqtt-client
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.
import React from 'react'
import { Connector } from 'react-mqtt-client'
export const App = () => (
<Connector
mqttProps={{
url: 'ws://https://test.mosquitto.org:8080',
options: { protocol: 'ws' }, // see MQTTjs options
}}
>
<Connected />
</Connector>
)
import { subscribe } from 'react-mqtt-client'
const MessageList = props => {
const { mqtt } = props
return (
<React.Fragment>
{props.data.reverse().map((d, i) => (
<p>{`${JSON.stringify(d, null, 4)}`}</p>
))}
</React.Fragment>
)
}
const Connected = subscribe({ topic: '#' })(MessageList)
In addition to topic
you can add saveData
prop to let the custom dispatcher know if data from the broker needs to be saved.
defaults to true.
import React from 'react'
import { subscribe } from 'mqtt-react'
const sendMessage = props => () => props.mqtt.publish('@demo/topic', 'Hello World')
const SendMessageButton = props => <button onClick={sendMessage(props)}>Send Message</button>
export default subscribe({ topic: '@demo/topic' })(SendMessageButton)
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,
})
Pull Requests are very welcome!
MIT © mrinalraj