Working with stropheJS library in reactJS app

Question

I am trying to connect to a XMPP server using StropheJS library but can't figure out the right way to integrate it in my reactJS app. Now I got my code working by exporting Strophe object by adding this line in strophe.js package file in node_modules folder module.exports = Strophe; but I don't think this is the right way to go about it. Can someone guide me how to go about it. In my js file I am importing strophe by adding line:

    // This is JS
    import React, { Component } from 'react';    
    import Strophe from "strophe";

    class Login extends Component {
      constructor(){
        super();
        this.state = {
          connection: null
        }
      }
      componentWillMount(){
        this.setState({
          connection : new Strophe.Connection("http://localhost:7070/http-bind/")
        });
      }

I want a way out without modifying the original strophe package file. Here is my complete code if you want to have a look: https://github.com/cravi24/clientApp/blob/master/src/Components/Login.js

Answer 1

Finally figured out the problem with my code. Strophe is a global object in Strophe library and as soon as I import this library in my react app, it becomes part of window object. Hence I need to use it like this :

new window.Strophe.Connection("http://localhost:7070/http-bind/")

instead of

new Strophe.Connection("http://localhost:7070/http-bind/")

Earlier I was expecting the strophe object to be available in my class as local var but since it wasn't exported in the strophe library, I couldn't access it.