How to add script tag to React/JSX

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

Comments

[Olubummo Faith]

Thanks for writing this. It is appreciated.