How to add script tag to React/JSX
Tags: react
Published: 2022-07-27 13:44:27

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.

{% embed https://youtu.be/CVAFbJtDS4o %}

## 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:

```html
...
<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:

![script in index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nm3kk0hv3ew437ltz7hg.png) 

## 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 `useEffect`hook:

```jsx
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:

```js
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:

```jsx
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](https://www.npmjs.com/package/react-helmet), which can be used to add scripts as well.

First, let's install it using the following command:

```bash
npm i react-helmet
```

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

```jsx
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
```