Open In App

How to include an external JavaScript library to ReactJS ?

Last Updated : 09 Oct, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

JavaScript library is pre-written collection of code snippets, objects, and functions so that we can reuse the functions, objects, and code snippets to perform a common task. It is generally use as the scripts in the <script> tags. We can use different methods to include external JavaScript libraries in ReactJS.

Steps to create the application:

Step 1: Create a React application using the following command inside your terminal or command prompt:

npx create-react-app name_of_the_app

Step 2: After creating the react application move to the directory as per your app name using the following command:

cd name_of_the_app

Project Structure

Now modify the default App.js file inside your source code directory according to any of the following approaches. 

Approach  1: Using react-helmet Package

The react-helmet is also a well-known npm package mostly used for adding an element at the head of a react document. We can add a script tag inside the head of the document using this package. Parsing the CDN of the library as a source of the script tag will eventually add this script to our document.

Installation: Open the terminal inside your ReactJS project folder and write the following code to install react-helmet Package.

npm install --save react-helmet --legacy-peer-deps

Import ‘Helmet’ component: Import the ‘Helmet’ component from react-helmet package at the top of the source code file.

import {Helmet} from "react-helmet";

Call the <Helmet> component inside our App.js file:

  • Helmet is a non-self closing component. It is basically used to add HTML code inside the <head> of the document. It takes the HTML tags which are desired to remain inside <head> and outputs them.
  • The Helmet package supports both server-side and client-side rendering.
  • Call this component inside our JSX component named ‘App’ and create a basic HTML <script> tag inside it. Into the <script> tag add the URL of the jQuery library with the ‘src’ attribute.

Example: This example use react-helmet npm package to add external script in the react-app

App.js




import React from "react";
import "./App.css";
import { Helmet } from "react-helmet";
 
function App() {
    return (
        <div className="App">
            <h1>
                Geeksforgeeks : How to include an external
                JavaScript library to ReactJS?
            </h1>
            <Helmet>
                <script src=
                        type="text/javascript"
                />
            </Helmet>
        </div>
    );
}
 
export default App;


Run the application: Open the terminal and write the following command in your terminal.

npm start

Output: Inspect the output to check that our library is properly added or not.

Approach 2: Using JavaScript DOM Methods

Installing that many packages can make our application heavy and slow as well. So using JavaScript DOM methods is best. We have no need to install any external packages in this method. The steps of this method are:

  • Create a function that takes the cdn link/ url of the desired library
  • Create an emplty script element using dom method document.createElement.
  • Assign the url to src attribute and set async true to load the script immediatly when program starts.
  • Use document.body.appendChild method to add this script to the html body.
  • Call the function inside the App component enclosing it inside curly brackets. Pass the URL of our desired library as a string.

App.js




import React from "react";
import "./App.css";
 
// Create the function
export function AddLibrary(urlOfTheLibrary) {
    const script = document.createElement("script");
    script.src = urlOfTheLibrary;
    script.async = true;
    document.body.appendChild(script);
}
 
function App() {
    return (
        <div className="App">
            <h1>
                Geeksforgeeks : How to include an external
                JavaScript library to ReactJS?
            </h1>
 
            {/* Call the function to add a library */}
            {AddLibrary(
            )}
        </div>
    );
}
 
export default App;


Run the Application: Open the terminal and write the following command in your terminal.

npm start

Output: Inspect the output to check that our library is properly added or not.

Approach 3: Using <scirpt> tag in index.html of public directory

We can also add the scripts directly in the ReactJS using the index.html file in the public directory. Go to the public directory and add the CDN/script link using the script tag inside the body tag as shown

Example: In this example script tag is added with the script url in the body tag in html file.

Javascript




// App.js
import React from "react";
import "./App.css";
import { Helmet } from "react-helmet";
 
function App() {
    return (
        <div className="App">
            <h1>
                Geeksforgeeks : How to include an external
                JavaScript library to ReactJS?
            </h1>
 
        </div>
    );
}
 
export default App;


HTML




<!-- public/index.html-->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <link rel="icon"
        href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1" />
    <meta name="theme-color"
        content="#000000" />
    <meta name="description"
        content="Web site created using create-react-app" />
    <link rel="apple-touch-icon"
        href="%PUBLIC_URL%/logo192.png" />
 
    <link rel="manifest"
        href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
 
</head>
 
<body>
    <div id="root"></div>
    <script
        type="text/javascript"></script>
</body>
 
</html>


Run the Application: Open the terminal and write the following command in your terminal.

npm start

Output: Inspect the output to check that our library is properly added or not.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads