how to add external library to reactjs?

Question

what are the various options to add an external JS library to reactjs component? for example, if we have any library file such as example.js and it is used by only one react component then i would like to either add this library at index.html or at the component level. I would like to know how to include at component level.

Answer 1

Hosted Client-Side Libraries

If you want to import a client-side hosted library your only option is to include it in index.html

For instance, if we wanted to include D3 in one of our components, we could add <script src="https://d3js.org/d3.v5.min.js"></script> to /public/index.html Then to use it from inside your component, you need to call window.d3 instead of just d3

Non-Hosted client-side libraries

If you have a library that is not hosted, you could always save it to it's own file. once you do that, simply import it like you would any other local file import some_library from "./path/to/some/library"

Answer 2

By "external libraries" I'm assuming you're talking about npm/yarn repository libraries, for example:

$ npm install moment (Moment.js)

In those cases, you want to import it as:

import moment from 'moment'

Another example from the same package can be seen here

Answer 3

1. Easiest way is to find out whether your external library has an npm module, if so you can simply do an npm install.
2. Else you can add the link to this library in your index.html.
3. Otherwise you can download the files of your external library and use it inside as if its your own code(better checkout whether its free library to do that). In this case you can simply import the file

Answer 4

You can create a component that inserts the script to the header of your site. For example:

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

const ExternalLibrary = () => {

    useEffect(()=>{
        if (typeof window !== "undefined"){

            // Make sure it only gets included once.
            if (!document.getElementById("externalLibrary")){
                const script = document.createElement('script');
                script.id='externalLibrary'
                script.type = 'text/javascript';                
                script.src = `https://externallibrary.com/example.js`; 

                // Call some function from the library when it loads.
                script.onload = function() {                    
                    window.someFunction()
                };
                
                document.getElementsByTagName("head")[0].appendChild(script);
            }
            
        }
    }, []);

    return null;

}  
 
export default ExternalLibrary;

Then you can just include this in your App.js, or other components.

Answer 5

You can use like that :

import abc from './abc.js'

Check here : How to include external javascript library in reactjs