{

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 script or inline scripts to individual components 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 aeasy 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;
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React