Skip to content
react

How to add script tag to React/JSX

Apr 1, 2023Abhishek EH2 Min Read
How to add script tag to React/JSX

Table of Contents

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:

index.html
1...
2<script
3  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
4  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
5  crossorigin="anonymous"
6  async
7></script>
8...

If you run the application, inspect and check, you will see the script added inside the head tag:

script in index.html

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:

App.js
1import { useEffect } from "react"
2import { Helmet } from "react-helmet"
3

4function App() {
5  useEffect(() => {
6    const script = document.createElement("script")
7

8    script.src =
9      "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
10

11    script.async = true
12

13    script.integrity =
14      "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
15

16    script.crossOrigin = "anonymous"
17

18    document.body.appendChild(script)
19

20    return () => {
21      // clean up the script when the component in unmounted
22      document.body.removeChild(script)
23    }
24  }, [])
25

26  return <div className="App"></div>
27}
28

29export default App

If you want to reuse this snippet, then you can create a custom hook as shown below:

useScript.js
1import { useEffect } from "react"
2

3const useScript = (url, integrity, async = true, crossOrigin = "anonymous") => {
4  useEffect(() => {
5    const script = document.createElement("script")
6

7    script.src = url
8

9    script.async = async
10

11    if (integrity) {
12      script.integrity = integrity
13    }
14

15    script.crossOrigin = crossOrigin
16

17    document.body.appendChild(script)
18

19    return () => {
20      document.body.removeChild(script)
21    }
22  }, [url, integrity, async, crossOrigin])
23}
24

25export default useScript

And use it in the App component as shown below:

App.js
1import useScript from "./useScript"
2

3function App() {
4  useScript(
5    "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
6    "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
7  )
8  return <div className="App"></div>
9}
10

11export 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:

1npm i react-helmet

It can be used to include script (or any element inside the head tag) as shown below:

1import { Helmet } from "react-helmet"
2

3function App() {
4  return (
5    <>
6      <Helmet>
7        <script
8          src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
9          integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
10          crossorigin="anonymous"
11          async
12        ></script>
13      </Helmet>
14      <div className="App"></div>
15    </>
16  )
17}
18

19export default App

Do follow me on twitter where I post developer insights more often!

Related Articles

Leave a Comment

Tools

© 2024 CodingDeft.Com