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/typeit@8.0.6/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?
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]);
};