ReactJs adding Third party Javascript Plugin

Question

I am trying to use a Javascript plugin TypeIt to a reactjs(version 17.2). Even though it has npm i am trying to use the plain vanilla js version.
I can't figure this out.

I have used the following hook to inject script to the body

import { useEffect } from 'react';
const useScript = resourceUrl=> {
    
  useEffect(() => {
    const script = document.createElement('script');
    script.src = resourceUrl;
    script.async = true;
    console.log(script)
    document.body.appendChild(script);
return () => {
      document.body.removeChild(script);
    }
  }, [resourceUrl]);
};
export default useScript;

In the component I am using the following code

import React, {useEffect, useRef} from 'react'
import useScript from '../../Hooks/useScript'

const TypeText = () => {

    useScript('vendor/typeTextScript.js')
    // useScript('https://unpkg.com/[email protected]/dist/index.umd.js')
    const typeTrigger = useRef()
    
    
    useEffect(()=> {
        
            setTimeout(() => {
                new TypeIt(typeTrigger.current, {
                    strings: "This is my string!",
                    speed: 75,
                    loop: true,
                  }).go();
            }, 100);
          
    },[])
    

    return (
        <>
            <h1>This is a TypeText component</h1>
            <p ref={typeTrigger}></p>



        </>
    )
}

export default TypeText

I am getting the following error: TypeIt is not defined. Can you help me?

Taghi Khavari · Accepted Answer · 2021-10-26 09:00:53Z

1

I don't know why you don't want to use npm to install that package but here is what you need to do:

add type property to your script so browser would know how to deal with it

const useScript = (resourceUrl: string) => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = resourceUrl;
    script.async = true;
    script.type = "text/javascript"; // you need to add this line
    console.log(script);
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [resourceUrl]);
};

answered Oct 26, 2021 at 9:00

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rejin Jose Over a year ago

Added script.type. Still the error persists. Eventhough the Library file is loaded, the initialisation is not getting triggered. I am not using NPM coz, a situation may arise where we need to use a particular JS plugin, but no NPM for the same.

Rejin Jose Over a year ago

I have found out if we remove the following configuration "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, from package.json file, the above code works. ESLint configuration is causing the issue. I don't know why

Rejin Jose Over a year ago

Found out the issue. Since eslint is already configured, we need to comment the initialisation section like

setTimeout(() => {                 /*global TypeIt*/                 new TypeIt(typeTrigger.current, {strings: "This is my string!",speed: 75,loop: true, }).go();}, 100);

We need to comment it as /*global someFunction, a*/

Collectives™ on Stack Overflow

ReactJs adding Third party Javascript Plugin

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related