How to add script or inline tag to react component

How to add script or inline tag to react component

Sometimes, We want to add the script tag to individual components. This post talks about adding scripts or inline scripts to individual components with multiple approaches

  • Functional components with useHook
  • React class components with componentWillMount
  • React-helmet npm package

how to add a script tag to react components

This section describes adding a script tag to class and functional components.

React class components:

There is a callback method componentWillMount which will be called for every render of a react component. Inside call back,

  • Created script tag using document createElement function which creates a script tag
  • Change created script tag attributes src and async
  • Finally, add a script tag to the document. body or document. head

Example code:

   componentWillMount() {
        const scriptTag = document.createElement("script");
        scriptTag.src = "https://use.typekit.net/hello.js";
        scriptTag.async = true;
        document.body.appendChild(scriptTag);
    }

The same code can be replaced with functional components using the useEffect() hook. useEffect hooks call for every render of a react component,

if you pass an empty array to return inside the useEffect() hook, It will load and run only once.

import React from "react";
import { useEffect } from "react";

function InlineStyleComponent(props) {
  useEffect(() => {
    const scriptTag = document.createElement("script");

    scriptTag.src = "https://use.typekit.net/foobar.js";
    scriptTag.async = true;

    document.body.appendChild(scriptTag);
    return () => {
      document.body.removeChild(scriptTag);
    };
  }, []);

  return <div>Adding inline styles to functional component</div>;
}

export default InlineStyleComponent;

react-helmet adding script tag inside the head tag

React helmet is an npm library that manages browser head manager, It is easy to change web page lines of code inside a head tag.

First, install react-helmet with the npm install command

npm install react-helmet

It adds dependency to package.json

"dependencies": {
        "react-helmet": "^6.1.0",
}

Complete component code to add script tag to component using react-helment.

import React, { Component } from "react";
import { Helmet } from "react-helmet";

class AddingScriptExample extends Component {
  render() {
    return (
      <div className="application">
        <Helmet>
          <script
            src="https://use.typekit.net/hello.js"
            type="text/javascript"
          />
        </Helmet>
        ...
      </div>
    );
  }
}
export default AddingScriptExample;