DEV Community 👩‍💻👨‍💻

Cover image for How to add script tag to React/JSX
collegewap
collegewap

Posted on • Originally published at codingdeft.com

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>
...
Enter fullscreen mode Exit fullscreen mode

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:

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
leye5555 profile image
Olubummo Faith

Thanks for writing this. It is appreciated.

🌚 Life is too short to browse without dark mode