I am trying to add js scripts (that are fully functional) to a react project. I know its not best practice but lets say i have to do it. I tried to add them using useEffect:
useEffect(() => {
const script = document.createElement('script');
script.src = "./js/app.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, []);
and using react helmet:
export const Script = () => {
return(
<Helmet>
<script type="text/javascript" src="./js/libs/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</Helmet>
)
}
export default Script;
But in both version the scripts don’t work.
My app.js:
$(function() {
var $body = $('body');
//---------- Close on click Outside of Container
//------------------------------------------------------------------------------
function clickOutsideContainer(selector, container, callback) {
selector.on('mouseup', function (e) {
e.stopPropagation();
if (!container.is(e.target) && container.has(e.target).length === 0) {
callback();
}
});
};
//---------- Modal
//------------------------------------------------------------------------------
function modal() {
var modalInit = $('.js-modal-init');
var modalInner = $('.js-modal-inner');
var modalSel = $('.js-modal');
var modalShowClass = 'is-visible';
modalInit.on('click', function() {
modalSel.addClass(modalShowClass);
});
function closeModal() {
modalSel.removeClass(modalShowClass);
};
clickOutsideContainer($body, modalInner, closeModal);
}
modal();
});
Did you invoke the code inside your script