How to include third party js libraries in React app

Question

I am new to React and am looking for the React equivalent of this JQuery approach to including analytics throughout my application.

Typically I would:

Include the 3rd party library on the html pages. Easy enough to put on the index.html page but I don't know if that is best practice.

<script src="http://path/to/script/utag.js" />
Then I can interact with the library as long as it has loaded, which I can verify using JQuery window.load. This script will run fine on a plain html page, but I am trying to find the equivalent best practice way of doing this in my react app. I don't want to introduce jquery and currently my React container will tell me that utag is not defined if I try referencing utag in a function.

<script> $(window).load(function() { utag.link({ "event_name" : "locale_select", "language" : utag_data.language, "currency" : utag_data.currency } ); }); </script>

I'm new to React so any help would be great. I know that my project is not using webpack, it's using react-scripts and was started using the create-react-app utility.

Mohammad Mahmoudi · Accepted Answer · 2018-04-24 12:00:11Z

3

According to this issue on GitHub if you are using create-react-app, if you want to use global variables that imported or created in your index.html file in your react script, you must use window.variable_name.

In your case, this will probably work

import React from "react"
class App extends React.Component {
    componentDidMount() {
        window.utag.link({ "event_name" : "locale_select", "language" : 
    window.utag_data.language, "currency" : window.utag_data.currency } );
    }

    render() {
        return <div />;
    }
}

edited Apr 24, 2018 at 12:00

answered Apr 24, 2018 at 11:55

Mohammad Mahmoudi

573 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel · Accepted Answer · 2018-06-04 23:58:56Z

import someLibrary from 'some-library';

class App extends React.Component {
  componentDidMount() {
    someLibrary();
  }

  render() {
    return <div />;
  }
}

Its important to understand the statement inside the Component offered above. componentDidMount() is a lifecycle method that gets called automatically after the Component has been rendered to the screen. Then inside of it you call your someLibrary(). Depending on what type of third-party library you are talking about will dictate what you may need to also pass into someLibrary().

This is how Reactjs interacts with third-party libraries, because typically third-party libraries do not know how to be in a React ecosystem. They don't have any idea what a render() method is or what JSX is. So this is the general way of making third-party libraries work nicely with React.

elas · Accepted Answer · 2017-08-30 00:09:18Z

1

If you are using create-react-app, then webpack is being used to bundle your javascript. Here's the documentation on installing dependencies with create-react-app.

To include you library, you should install it as an npm package, and import it into the file where you want to use it. Webpack will include it in the bundle and everything should just work.

So, Install the library with npm install some-library. Import it into a file and call it from a component:

import someLibrary from 'some-library';

class App extends React.Component {
  componentDidMount() {
    someLibrary();
  }

  render() {
    return <div />;
  }
}

answered Aug 30, 2017 at 0:09

elas

8154 silver badges9 bronze badges

1 Comment

user1521567 Over a year ago

So the script I want to include is not available as an npm package. Also it needs to be served up from the CDN. Is it possible to include it on the index page and reference it in components?

Collectives™ on Stack Overflow

How to include third party js libraries in React app

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related