I'm trying to add inline scripting to a React component: I have my custom hook:
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
};
export default useScript;
Which I use like so:
import useScript from 'hooks/useScript';
const MyComponent = () => {
useScript('path/to/my.js');
}
Script added to the document after SPA navigation event but it doesn't add events to my buttons without reloading the page.
I had a problem inside one of the added scripts. I changed the way of adding script. I exported the function inside js, then I imported this function inside my component and then I used useEffect.
import { MyFunction } from './myscript.js';
const MyComponent = () => {
useEffect(() => {
MyFunction();
}, []);
return(
......
)