Using third-party libraries is very common while developing apps for the web. The usual way is to install the NPM package of the library and import it for your use. But sometimes, the NPM package is unavailable, or you have to include files directly from a CDN or external source. Adding tags in the index.html file does not work every time, and even if it does, it could cause issues as the website scales. <script> I faced a similar issue while adding Calendly import to my portfolio site and found an easy solution. But first, let's understand why exactly an error occurs when you add tags in React components. <script> Why it Throws an Error React uses to render JSX content on the web page. React DOM is a virtual DOM that resides on top of the original DOM. It only updates changed nodes from the DOM, unlike the original DOM, which completely updates itself after every change. React DOM uses to convert JSX into DOM elements. React DOM createElement The function uses the API to add changed nodes in the browser's original DOM. HTML5 specifications state that tags are not executed if they are inserted with . have explained the security reasons behind this. createElement innerHTML <script> innerHTML MDN Web Docs As a result, the execution of the tag throws an error in React. <script> The Solution The simplest solution is to add scripts directly into DOM using the interface provided by web APIs. We can use JavaScript's DOM manipulation methods to inject the tag without React DOM interfering. Document <script> Here is what we have to do: At first, we get head and script tags from DOM. Then, we use the setAttribute method to add a new script. The modified script tag is appended to the head. In React terms, the desired script has to be added to DOM when the component loads on the browser. React has a hook for such scenarios: . The whole process explained above can be wrapped inside the hook and triggered when the component renders for the first time or a new script is added. useEffect In real-world projects, we might want to add multiple scripts. Hence, it's better to create a custom hook, so we can call it multiple times with different source links. Custom hooks are usually stored in a separate directory within the folder. Let's create a new file inside the directory and name it . Paste the following code in the file: /src /src/hooks/ useExternalScripts.js import { useEffect } from 'react';

export default function useExternalScripts({ url }){
  useEffect(() => {
    const head = document.querySelector("head");
    const script = document.createElement("script");

    script.setAttribute("src", url);
    head.appendChild(script);

    return () => {
      head.removeChild(script);
    };
  }, [url]);
}; In a component where you want to add a new script, paste the following code: import useExternalScripts from "./hooks/useExternalScripts"

const Component = () => {
  useExternalScripts("https://www.scriptdomain.com/script")
  ...
} A new script is appended to the head of the page whenever the component is mounted in the DOM. The script is removed when the component unmounts. Don't use the snippet if your script is used in multiple components throughout your app. The function returned by the hook is a cleanup function, which is executed when a component is unmounted. Hence, we don't require it if we have to use the source at multiple places. return Alternate Solution Alternatively, you can use , which manages changes within the tag. The can take care of the script if it is placed inside of it. react-helmet <head> <Helmet> import { Helmet } from "react-helmet"

export default function Component() {
  return (
    <>
      <Helmet>
        <script
          src="https://www.myscripts.com/scripts"
          crossorigin="anonymous"
          async
        ></script>
      </Helmet>
      ...
    </>
  )
} Don't forget to install react-helmet before you start your app! Wrapping Up React uses at the core to manipulate nodes on the browser's DOM. The API doesn't support tags for security reasons. Hence, an error is thrown if you try to inject a tag in a React component. innerHTML innerHTML <script> <script> Adding a new script tag and directly appending it to the element of the page is the easiest way to add tags in the React app. react-helmet is a third-party library that can be used to achieve the same thing by handling the tag on every page. <head> <script> <head> I feel the custom hook version is better than using a third-party library since we have full control over it. What do you think? Did you use any other method? Let me know down below! If you found this blog helpful, consider sharing it on your social. You can read more blogs about web dev, open-source, and stuff I fix while developing apps on . Or if you want to say hi, I am most active on . my blog Twitter Until then, happy debugging! ⛑ Also published here

Too Long; Didn't Read

Making security fun one episode at a time

How to Add Script Tags in React

Too Long; Didn't Read

Kaushal Joshi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Add Script Tags in React

Too Long; Didn't Read

Kaushal Joshi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES