collegewap

Posted on Jul 27, 2022 • Edited on Mar 28, 2023 • Originally published at codingdeft.com

How to add script tag to React/JSX

#react

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