{"_id":"@andrey.kislov/mqtt-react","_rev":"3-2fe31a2a6f1808037309c5c0ce47bf76","name":"@andrey.kislov/mqtt-react","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.2":{"name":"@andrey.kislov/mqtt-react","version":"0.0.2","description":"Connecting MQQT to React Components","main":"./lib/index.js","scripts":{"build:lib":"NODE_ENV=development babel src --out-dir lib","build:umd":"cross-env NODE_ENV=development webpack --config=webpack.config.js src/index.js dist/mqtt-react.js","build:umd:min":"cross-env NODE_ENV=production webpack --config=webpack.config.js src/index.js dist/mqtt-react.min.js","build":"npm run build:lib && npm run build:umd","test":"cross-env NODE_ENV=test ava"},"repository":{"type":"git","url":"git+https://github.com/ANDeaD-K/mqtt-react.git"},"keywords":["react","mqtt"],"author":{"name":"Andrey Kislov"},"license":"MIT","ava":{"files":["./test/*.spec.js"],"failFast":true,"tap":true,"verbose":true,"require":["babel-register"],"babel":"inherit"},"dependencies":{"mqtt":"^2.7.0"},"peerDependencies":{"react":"^15.5.0","react-dom":"^15.5.0","prop-types":"^15.5.8","object.omit":"^3.0.0"},"devDependencies":{"ava":"^0.19.1","ava-spec":"^1.1.0","babel-cli":"^6.24.1","babel-loader":"^7.0.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^4.0.0","enzyme":"^2.8.2","react":"^15.5.0","react-dom":"^15.5.0","prop-types":"^15.5.8","react-test-renderer":"^15.5.4","sinon":"^2.2.0","webpack":"^2.4.1"},"gitHead":"d831e8257812d37d303560c0f5ef126a69a8f866","bugs":{"url":"https://github.com/ANDeaD-K/mqtt-react/issues"},"homepage":"https://github.com/ANDeaD-K/mqtt-react#readme","_id":"@andrey.kislov/mqtt-react@0.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"andead","email":"andead@inbox.ru"},"dist":{"integrity":"sha512-r3YJ8k9gyt8hr+bybzMnxQIXDJlsOhsZyQDO+bszZqE/UAY8fasd47sOFCAsWEUcb6WgqCKOEn8mRs4Sfc7P8w==","shasum":"e9111d13362f8c958875d199d70e894d77e87b08","tarball":"https://registry.npmjs.org/@andrey.kislov/mqtt-react/-/mqtt-react-0.0.2.tgz","fileCount":11,"unpackedSize":180337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoxuYCRA9TVsSAnZWagAAQPYP/0RVpNGtMS/ndhoTFpa1\nGzbTzxL0pP8uOR6feY4EV5SB0IZ6Xg/evuPWEtwNx7Os3bt91JNx5EjXD+kW\nrx0FFI3DSFs4sYVjw3sB1SAVLunw9vxvZIjL+yQTFCPHRf5Dgvfp5acLsGG5\nGcLnORg/KbGAjQMcCh3HptlitK1qtLVcXN3UnW2QM/4w4KXwRXqYkcKCp+of\nzArjyT/A+Km7F71R6ZOU3mj4m8q+eIiZX1B0s2owgs5feKJ38/AxBeXPGhBw\ninuIZDSBdkFOnrYWKwORr1TU++7r0e3dYJfGfkkKHN0FDe9DZkGp4gq67prl\nBtgZ8C1IgXGvcZJC+smRD0pLjZjh7VolR+ylxbwUvS1waK9Gcq/8AMOBphpr\n4ZlxjoHPt6Ixku2fZECyU9uy5GVv1YE9RpE0E+kZJksVoa5pUCqFyX0QYSjG\nEI5NHI6q6EX2CPNkdUPO17oOyVUpWN+7+RfZ68h5sTkP/99oVpA5kf8zWhG8\nEGKJLCSkm3QGxh5Pd7bPAJD/lSDcap5/aF/onKw8Hlj6XiWDR1QyBy+NJWuv\nDD2a6kVqQU7GlMUgkdfCq9sOryi/6XmMBruXIWpmc1FqfDwgtuaSmekB9kNM\nscHGjVTrbxwUG4FaOTozD7njzu0jwbfxMccpZ+kZbmuYRLSKfZ3dj1W6mly+\nFXSS\r\n=YtIj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMTvtnTmvY/TyaHymArX1sDiM1C2dEWPE/qJTCpLN+DQIhAI9cFJDL7xG+SxvzvQnEDQ0Ps/Hasi3mI/FdLblz/Vz8"}]},"maintainers":[{"name":"andead","email":"andead@inbox.ru"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mqtt-react_0.0.2_1554193303475_0.7571365717338376"},"_hasShrinkwrap":false},"0.0.3":{"name":"@andrey.kislov/mqtt-react","version":"0.0.3","description":"Connecting MQQT to React Components","main":"./lib/index.js","scripts":{"build:lib":"set NODE_ENV=development&& babel src --out-dir lib","build:umd":"set NODE_ENV=development&& webpack --config=webpack.config.js src/index.js dist/mqtt-react.js","build:umd:min":"set NODE_ENV=production&& webpack --config=webpack.config.js src/index.js dist/mqtt-react.min.js","build":"npm run build:lib && npm run build:umd","test":"cross-env NODE_ENV=test ava"},"repository":{"type":"git","url":"git+https://github.com/ANDeaD-K/mqtt-react.git"},"keywords":["react","mqtt"],"author":{"name":"Andrey Kislov"},"license":"MIT","ava":{"files":["./test/*.spec.js"],"failFast":true,"tap":true,"verbose":true,"require":["babel-register"],"babel":"inherit"},"dependencies":{"mqtt":"^2.7.0"},"peerDependencies":{"react":"^15.5.0","react-dom":"^15.5.0","prop-types":"^15.5.8","object.omit":"^3.0.0"},"devDependencies":{"ava":"^0.19.1","ava-spec":"^1.1.0","babel-cli":"^6.24.1","babel-loader":"^7.0.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^4.0.0","enzyme":"^2.8.2","react":"^15.5.0","react-dom":"^15.5.0","prop-types":"^15.5.8","react-test-renderer":"^15.5.4","sinon":"^2.2.0","webpack":"^2.4.1"},"gitHead":"d831e8257812d37d303560c0f5ef126a69a8f866","bugs":{"url":"https://github.com/ANDeaD-K/mqtt-react/issues"},"homepage":"https://github.com/ANDeaD-K/mqtt-react#readme","_id":"@andrey.kislov/mqtt-react@0.0.3","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"andead","email":"andead@inbox.ru"},"dist":{"integrity":"sha512-kNlfaD4wFro6jYnruC8GeiID8sKUkag9E+oXkpWSGmeojaFesF0A8oYHvEeJHhuMwlRuSSwjo93GKT3boF5fVw==","shasum":"621f1fafd0f010c5542852b351f03a58e0e4f02d","tarball":"https://registry.npmjs.org/@andrey.kislov/mqtt-react/-/mqtt-react-0.0.3.tgz","fileCount":15,"unpackedSize":719103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoyFSCRA9TVsSAnZWagAAdvgQAKI/iu+d9GjeqtmyAKig\nN9HYzihZgvICADYS88RCiiUIAodkr1ts3KnjYJQWB5NNLMf2H+hVbEIkL8PO\nQ3j43BzGiVGTL58+9f44RIM6SqdGP/pavFJOnjTLrA/jS+LKsMYgv9k4KxeB\nqJmOBILp8zW+/dbLk1gPEHSUcXTkKqxhQdSMYtfuouk8r4QNQCc+dPjZFqd0\n4dyyiBznYCBDU/Nvmw4sy+t4EVhMYEocjTYgCl0qJC86wU2EKiN2g6JNwqCM\n9EtdBK+AwAX8qSVMlmxRL9QSdedQn7F4sEQlQGjTtYMt6mojMSRjTRdUoQ1m\nPRa4XwCRt7NN/brnhIb/mlEjXH6RVrcdpWOr7nXuw/ayN/7pI+E0pUVXZYGs\n2T0OUxCHQTLuY9OQcfB8QSfSeR8epnSFYlx4wAFsqBxuC+pJkTlsLU4iMBXN\nKvP7NAsc5D+Q+aVNuHd2hKszYuAqULyLX10NvPKkBhjKuTTGyHZOKFhiw28Y\nw3ZTiXdEloklXClW7yD911UDMXtNXU+KcDsaGbYxWx58hqOTsDrV6wPszrSA\nJEYr6wRQcbOotbc3muNYkT5Po1iIaCGXUHvvMPCDmvbrwLshmqg0G30i/Rci\n9wA2Qn92iHXtTd8wqcFRoCqzoltqpHPB8QGYu7bOQl5LaFIhlNYw1x4zIVpw\nSBTf\r\n=PXI4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp3r/EJuOO3+nhHxFfcTYzOdGFrDP5cGBMXymm1/l8xQIgKYphFu77hPGLgcyHSF6oY38kvUoPB2uw9USQLYfDUjw="}]},"maintainers":[{"name":"andead","email":"andead@inbox.ru"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mqtt-react_0.0.3_1554194769781_0.6895174720112647"},"_hasShrinkwrap":false},"0.0.4":{"name":"@andrey.kislov/mqtt-react","version":"0.0.4","description":"Connecting MQQT to React Components","main":"./lib/index.js","scripts":{"build:lib":"set NODE_ENV=development&& babel src --out-dir lib","build:umd":"set NODE_ENV=development&& webpack --config=webpack.config.js src/index.js dist/mqtt-react.js","build:umd:min":"set NODE_ENV=production&& webpack --config=webpack.config.js src/index.js dist/mqtt-react.min.js","build":"npm run build:lib && npm run build:umd","test":"cross-env NODE_ENV=test ava"},"repository":{"type":"git","url":"git+https://github.com/ANDeaD-K/mqtt-react.git"},"keywords":["react","mqtt"],"author":{"name":"Andrey Kislov"},"license":"MIT","ava":{"files":["./test/*.spec.js"],"failFast":true,"tap":true,"verbose":true,"require":["babel-register"],"babel":"inherit"},"dependencies":{"mqtt":"^2.7.0"},"peerDependencies":{"react":"^15.5.0","react-dom":"^15.5.0","prop-types":"^15.5.8"},"devDependencies":{"ava":"^0.19.1","ava-spec":"^1.1.0","babel-cli":"^6.24.1","babel-loader":"^7.0.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^4.0.0","enzyme":"^2.8.2","react":"^15.5.0","react-dom":"^15.5.0","prop-types":"^15.5.8","react-test-renderer":"^15.5.4","sinon":"^2.2.0","webpack":"^2.4.1","object.omit":"^3.0.0"},"gitHead":"d831e8257812d37d303560c0f5ef126a69a8f866","bugs":{"url":"https://github.com/ANDeaD-K/mqtt-react/issues"},"homepage":"https://github.com/ANDeaD-K/mqtt-react#readme","_id":"@andrey.kislov/mqtt-react@0.0.4","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"andead","email":"andead@inbox.ru"},"dist":{"integrity":"sha512-ADreHrT9TE/AOGG2IXsHd9RUJ9Ch5kKgbFpqNO/WxGKI+lU2BsKf2Xlh9QtYNtxF82ema6q6vnn0/B/BCoSR8w==","shasum":"782afd6434cf630b26ec8a83ca3785fb69509e72","tarball":"https://registry.npmjs.org/@andrey.kislov/mqtt-react/-/mqtt-react-0.0.4.tgz","fileCount":15,"unpackedSize":719103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoyM5CRA9TVsSAnZWagAAkRYP/2VH3irL5QFccsF0njV/\n4LE9g3szF9u7mgUOG1yJblayYxiJ7pS60BxdSJQKzb2D3+owSXu72viyKkkg\nO8f82rDgRFo9qVLdTFFuPO+5qqdBj+juRUsBIjEybOFPT6SY4fmSMwqThwkm\nsc9diumm0otv5s52MgxzHqA3d6Bdz5ThY76hMlAcJnbScMB8CRsNVS6Fn1O0\n6v1jrEPxJILtr03EOQEdLeck2gpkOoc8/cj4FyOa1tymL7fsplBwHEz3U4Uk\nimUyTJ2UgdwT6fm5Mx02SrbpI8I6frnQl3MWdUmvyOMDfxeIrZuGq3wIoN83\nLJEKMzztYd0Gr7dO+AaABg9S3DVi7SdjQAWPAjImOEorsj3QTo+FOObsvx6N\nBx299actOiTU6EwM45GGy6aThyuBXhSy43tYdjtZoAD6artzkhDbP1S/GOnt\n96aJvoPUMVv/FB4Fh73TvEXncC/DQxQjaLgEJk1kwXzU3a/wp0/U6FtmqMB0\nJy5Rb4kmY+eg+1TMbenHWaPNuMNFVKd3QLed/45DDfQxjlRG9QV+oH0N08Pi\n+NJT46jzJ6hQbpalfEBbPhaMZ9iqItqAH4a8HexXlFHcgpqdZtkXuNc3m8v9\nTlBN6VvqywCOSDwBp/HQBxxDtITRyW2rWiids4pO17DeBQXGfolknvJqFvwD\nWqG6\r\n=vLP1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBcohzSKFKi8EENOE2Ntw2SyhZyhbHASkHqtjv9Y254AIhAOR9fZkNxL+UCbozlaaVLn0spthSQeDT+fo1I2RpNwmX"}]},"maintainers":[{"name":"andead","email":"andead@inbox.ru"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mqtt-react_0.0.4_1554195256414_0.10721740540070801"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-02T08:21:43.269Z","0.0.2":"2019-04-02T08:21:43.704Z","modified":"2022-04-04T14:02:16.298Z","0.0.3":"2019-04-02T08:46:10.036Z","0.0.4":"2019-04-02T08:54:16.705Z"},"maintainers":[{"name":"andead","email":"andead@inbox.ru"}],"description":"Connecting MQQT to React Components","homepage":"https://github.com/ANDeaD-K/mqtt-react#readme","keywords":["react","mqtt"],"repository":{"type":"git","url":"git+https://github.com/ANDeaD-K/mqtt-react.git"},"author":{"name":"Andrey Kislov"},"bugs":{"url":"https://github.com/ANDeaD-K/mqtt-react/issues"},"license":"MIT","readme":"[![Build Status](https://travis-ci.org/KeKs0r/mqtt-react.svg?branch=master)](https://travis-ci.org/KeKs0r/mqtt-react)\r\n\r\n# mqtt-react\r\nReact Container for [mqttjs/MQTT.js](https://github.com/mqttjs/MQTT.js)\r\n\r\n<!--\r\n### Installation\r\n```\r\nnpm i -S mqtt-react\r\n```\r\n-->\r\n\r\n## Demo\r\nThere is a very minimalistic Demo-App: [mqtt-react-demo](https://github.com/KeKs0r/mqtt-react-demo)\r\n\r\n### Usage\r\nCurrently, mqtt-react exports two enhancers.\r\nSimilarly to react-redux, you'll have to first wrap a root component with a\r\n```Connector``` which will initialize the mqtt instance and then subscribe to\r\ndata by using ```subscribe```.\r\n\r\n#### Root component\r\nThe only property for the connector is the connection information for [mqtt.Client#connect](https://github.com/mqttjs/MQTT.js#connect)\r\n\r\n**Example Root component:**\r\n```JavaScript\r\nimport { Connector } from 'mqtt-react';\r\nimport App from './components/App';\r\n\r\nexport default () => (\r\n  <Connector mqttProps=\"ws://test.mosca.io/\">\r\n    <App />\r\n  </Connector>\r\n);\r\n```\r\n\r\n#### Subscribe \r\n**Example Subscribed component:**\r\n```JavaScript\r\nimport { subscribe } from 'mqtt-react';\r\n\r\n// Messages are passed on the \"data\" prop\r\nconst MessageList = (props) => (\r\n  <ul>\r\n    {props.data.map( message => <li>{message}</li> )}\r\n  </ul>\r\n);\r\n\r\n// simple subscription to messages on the \"@test/demo\" topic\r\nexport default subscribe({\r\n  topic: '@demo/test'\r\n})(MessageList)\r\n```\r\n\r\n\r\n**Example Posting Messages**\r\n\r\nMQTT Client is passed on to subscribed component and can be used to publish messages via\r\n[mqtt.Client#publish](https://github.com/mqttjs/MQTT.js#publish)\r\n\r\n```JavaScript\r\nimport React from 'react';\r\nimport { subscribe } from 'mqtt-react';\r\n\r\nexport class PostMessage extends React.Component {\r\n    \r\n  sendMessage(e) {\r\n      e.preventDefault();\r\n      //MQTT client is passed on\r\n      const { mqtt } = this.props;\r\n      mqtt.publish('@demo/test', 'My Message');\r\n  }  \r\n  \r\n  render() {\r\n    return (\r\n      <button onClick={this.sendMessage.bind(this)}>\r\n        Send Message\r\n      </button>\r\n    );\r\n  }\r\n}\r\n\r\nexport default subscribe({\r\n  topic: '@demo/test'\r\n})(PostMessage)\r\n```\r\n\r\n**Advanced Susbcription / Integration with Redux:**\r\n\r\nIt is possible to provide a function that handles received messages. \r\nBy default the function adds the message to the data prop, but it can be used to dispatch actions to a redux store.\r\n```JavaScript\r\nimport { subscribe } from 'mqtt-react';\r\nimport store from './store';\r\n\r\n\r\nconst customDispatch = function(topic, message, packet) {\r\n    store.dispatch(topic, message);\r\n}\r\n\r\n\r\nexport default subscribe({\r\n  topic: '@demo/test',\r\n  dispatch: customDispatch\r\n})\r\n```\r\n\r\n## Credits\r\nSponsored by <a href=\"http://nearform.com\">nearForm</a>\r\n\r\n### Contributing\r\n\r\nPull Requests are very welcome!\r\n\r\nIf you find any issues, please report them via [Github Issues](https://github.com/KeKs0r/mqtt-react/issues)!\r\n\r\n### Contributors\r\n- Marc Höffl [@KeKs0r](https://github.com/KeKs0r)\r\n\r\n### License\r\n(MIT)","readmeFilename":"README.md"}