azure-reactjs-iot-hub-receiver v1.0.4

Getting Started with Create React App

This project was bootstrapped with Create React App.

Install Component

npm install azure-reactjs-iot-hub-receiver

or

npm add azure-reactjs-iot-hub-receiver

Azure Credentials:

• eventHubConsumerGroup:

  • From Azure Cli create the Consumer Group

    az iot hub consumer-group create --hub-name YourIoTHubName --name YourConsumerGroupName

    Reference Guide: https://docs.microsoft.com/en-us/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps

• eventHubEndpoint:

Setup Component:

// Import the component
import IotReciever from "azure-reactjs-iot-hub-receiver/dist/iotreceiver"
...

class App extends React.Component {
constructor(props) {
    super(props)
    // Setup the state variable to storage the received messages from IoT devices
    this.state = {
    example: ""
    }
}

// Setup the callback to receive messages from IoT devices

callbackFunction = (childData) => {
    console.log(childData)
    this.setState({
    example: childData
    })
}

render(){
    return (
    <div className="App">
        {// Setup the component props}
        <IotReciever
            callback={this.callbackFunction}
            eventHubConsumerGroup={"ConsumerGroupIoT"}
            eventHubEndpoint={"Endpoint=sb://xxxxxxx"}
        />
        {
        //.......
        }
    </div>
    );
}

}

export default App