You might have come across instances where you would want to include a third-party javascript directly in your react application, like including analytics script or some library directly from the CDN. In this article, we will see different ways to include JavaScript inside a react application.
Including the script in index.html
If you want the script to be loaded on every page of your application, you can directly add it to the index.html as shown below:
...
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
async
></script>
...
If you run the application, inspect and check, you will see the script added inside the head tag:
Adding script using useEffect
If you need to add a script to a specific component and after the component has mounted, you can have it inside the useEffecthook:
import { useEffect } from "react"
import { Helmet } from "react-helmet"
function App() {
useEffect(() => {
const script = document.createElement("script")
script.src =
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
script.async = true
script.integrity =
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
script.crossOrigin = "anonymous"
document.body.appendChild(script)
return () => {
// clean up the script when the component in unmounted
document.body.removeChild(script)
}
}, [])
return <div className="App"></div>
}
export default App
If you want to reuse this snippet, then you can create a custom hook as shown below:
import { useEffect } from "react"
const useScript = (url, integrity, async = true, crossOrigin = "anonymous") => {
useEffect(() => {
const script = document.createElement("script")
script.src = url
script.async = async
if (integrity) {
script.integrity = integrity
}
script.crossOrigin = crossOrigin
document.body.appendChild(script)
return () => {
document.body.removeChild(script)
}
}, [url, integrity, async, crossOrigin])
}
export default useScript
And use it in the App component as shown below:
import useScript from "./useScript"
function App() {
useScript(
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js",
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
)
return <div className="App"></div>
}
export default App
Adding script using react-helmet
There is a library called react-helmet, which can be used to add scripts as well.
First, let's install it using the following command:
npm i react-helmet
It can be used to include script (or any element inside the head tag) as shown below:
import { Helmet } from "react-helmet"
function App() {
return (
<>
<Helmet>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
async
></script>
</Helmet>
<div className="App"></div>
</>
)
}
export default App
Top comments (1)
Thanks for writing this. It is appreciated.