useScripts.jsx

/**
 * External dependencies
 */
import PropTypes from 'prop-types';

/**
 * WordPress dependencies
 */
// eslint-disable-next-line import/no-extraneous-dependencies
import { useEffect } from '@wordpress/element';

/**
 * Add an inline script to body
 */
export const useWithInlineScript = ({ inlineScript }) => {
    useEffect(() => {
        if (!window) {
            return;
        }
        const script = document.createElement('script');
        script.appendChild(document.createTextNode(inlineScript));
        document.body.appendChild(script);
    }, []);
}

useWithInlineScript.propTypes = {
    inlineScript: PropTypes.string.isRequired,
}

/**
 * Add a script tag to body
 */
export const useWithScript = ({ scriptSource }) => {
    useEffect(() => {
        if (!window) {
            return;
        }
        const script = document.createElement('script');
        script.src = scriptSource;
        script.async = true;
        document.body.appendChild(script);
    }, []);
}

useWithScript.propTypes = {
    scriptSource: PropTypes.string.isRequired,
}

useScriptsCleanUp.jsx

/**
 * External dependencies
 */
import PropTypes from 'prop-types';

/**
 * WordPress dependencies
 */
// eslint-disable-next-line import/no-extraneous-dependencies
import { useEffect,useRef } from '@wordpress/element';

/**
 * Add an inline script to body
 */
export const useWithInlineScript = ({ inlineScript }) => {
    const script = useRef();
    useEffect(() => {
        if (!window) {
            return;
        }
        script.current = document.createElement('script');
        script.current.appendChild(document.createTextNode(inlineScript));
        document.body.appendChild(script.current);
        return () => {
           script.current.remove();
        }
    }, []);
}

useWithInlineScript.propTypes = {
    inlineScript: PropTypes.string.isRequired,
}

/**
 * Add a script tag to body
 */
export const useWithScript = ({ scriptSource }) => {
    const script = useRef();
    useEffect(() => {
        if (!window) {
            return;
        }
        script.current = document.createElement('script');
        script.current.src = scriptSource;
        script.current.async = true;
        document.body.appendChild(script.current);
        return () => {
           script.current.remove();
        }
    }, []);
}

useWithScript.propTypes = {
    scriptSource: PropTypes.string.isRequired,
}

WithScripts.jsx

/**
 * External dependencies
 */
import PropTypes from 'prop-types';

/**
 * WordPress dependencies
 */
// eslint-disable-next-line import/no-extraneous-dependencies
import { Fragment, useEffect } from '@wordpress/element';

/**
 * Add an inline script to body and render component
 */
export const WithInlineScript = ({ inlineScript, children }) => {
    useEffect(() => {
        if (!window) {
            return;
        }
        const script = document.createElement('script');
        script.appendChild(document.createTextNode(inlineScript));
        document.body.appendChild(script);
    }, []);


    return <Fragment>{children}</Fragment>;
}

WithInlineScript.propTypes = {
    inlineScript: PropTypes.string.isRequired,
    children: PropTypes.node.isRequired
}

/**
 * Add a script tag to body and render component.
 */
export const WithScript = ({ scriptSource, children }) => {
    useEffect(() => {
        if (!window) {
            return;
        }
        const script = document.createElement('script');
        script.src = scriptSource;
        script.async = true;
        document.body.appendChild(script);
    }, []);

    return <Fragment>{children}</Fragment>;
}

WithScript.propTypes = {
    scriptSource: PropTypes.string.isRequired,
    children: PropTypes.node.isRequired
}