https://github.com/KeKs0r/mqtt-react

React container for MQTT
https://github.com/KeKs0r/mqtt-react

mqtt mqtt-client react

Last synced: 3 months ago
JSON representation

React container for MQTT

• Host: GitHub
• URL: https://github.com/KeKs0r/mqtt-react
• Owner: KeKs0r
• Created: 2017-05-03T10:33:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T06:51:40.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T18:21:21.682Z (7 months ago)
• Topics: mqtt, mqtt-client, react
• Language: JavaScript
• Size: 254 KB
• Stars: 46
• Watchers: 5
• Forks: 31
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/KeKs0r/mqtt-react.svg?branch=master)](https://travis-ci.org/KeKs0r/mqtt-react)

# 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](https://github.com/mqttjs/MQTT.js)

## Demo

There is a very minimalistic Demo-App: [mqtt-react-demo](https://github.com/KeKs0r/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](https://github.com/mqttjs/MQTT.js#connect)

**Example Root component:**

```JavaScript

import { Connector } from 'mqtt-react';

import App from './components/App';

export default () => (

  

    

  

);

```

#### Subscribe 

**Example Subscribed component:**

```JavaScript

import { subscribe } from 'mqtt-react';

// Messages are passed on the "data" prop

const MessageList = (props) => (

  


    {props.data.map( message => 
{message}
 )}

  

);


// 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](https://github.com/mqttjs/MQTT.js#publish)

```JavaScript

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 (

      

        Send Message

      

    );

  }

}

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.

```JavaScript

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](https://github.com/KeKs0r/mqtt-react/issues)!

### Contributors

- Marc Höffl [@KeKs0r](https://github.com/KeKs0r)

### License

(MIT)