How to include an external JavaScript library to ReactJS ?
Last Updated :
10 Apr, 2025
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
Integrating external libraries can enhance your application's functionality. 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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
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.
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(
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
)}
</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.
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
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
type="text/javascript"></script>
</body>
</html>
// 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;
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.
Similar Reads
How To Include a JavaScript File in Another JavaScript File? The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.It allows you to break your code into smaller modules and then import th
4 min read
How To Include a JavaScript File in Another JavaScript File? The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.It allows you to break your code into smaller modules and then import th
4 min read
How to Import Lodash Libraries in JavaScript ? Lodash is a popular JavaScript utility library that provides a wide range of functions for simplifying common programming tasks such as manipulating arrays, objects, strings, and more. Below are the various methods to import Lodash Libraries in JavaScript: Table of Content Importing individual metho
2 min read
How to import recharts.js library to ReactJS file ? Recharts.js is a redefined chart library built with React and D3. It helps in creating interactive line graphs, bar graphs, pie graphs, etc. One of the main principles of it is that all its components are independent, lightweight, and can be deployed easily. Prerequisites:NPM & Node.jsReact JSSt
2 min read
How to use External Modules and NPM in a project ? Need for External Modules: For a large JavaScript application, it becomes difficult and messy to write the whole code in just one JavaScript file. This is where CommonJS comes into the picture and this CommonJS format defines a module format that can be used up for breaking your JS application into
3 min read
How to use External Modules and NPM in a project ? Need for External Modules: For a large JavaScript application, it becomes difficult and messy to write the whole code in just one JavaScript file. This is where CommonJS comes into the picture and this CommonJS format defines a module format that can be used up for breaking your JS application into
3 min read