@aaronhayes/react-use-hubspot-form/build/module/index.js

Embed HubSpot forms into your React components using hooks! Works with Create React App, Gatsby and other platforms.

import React, { useState, useEffect, createContext, useContext } from 'react';

/**
 * Locales supported by HubSpot forms
 */
var HubSpotFormLocale;
(function (HubSpotFormLocale) {
    /**
     * English
     */
    HubSpotFormLocale["ENGLISH"] = "en";
    /**
     * Danish
     */
    HubSpotFormLocale["DANISH"] = "da";
    /**
     * German
     */
    HubSpotFormLocale["GERMAN"] = "de";
    /**
     * Spanish (Spain)
     */
    HubSpotFormLocale["SPANISH"] = "es";
    /**
     * Spanish (Mexico)
     */
    HubSpotFormLocale["SPANISH_MEXICO"] = "es-mx";
    /**
     * Finnish
     */
    HubSpotFormLocale["FINNISH"] = "fi";
    /**
     * French
     */
    HubSpotFormLocale["FRENCH"] = "fr";
    /**
     * Italian
     */
    HubSpotFormLocale["ITALIAN"] = "it";
    /**
     * Japanese
     */
    HubSpotFormLocale["JAPANESE"] = "ja";
    /**
     * Dutch
     */
    HubSpotFormLocale["DUTCH"] = "nl";
    /**
     * Polish
     */
    HubSpotFormLocale["POLISH"] = "pl";
    /**
     * Portuguese
     */
    HubSpotFormLocale["PORTUGUESE"] = "pt-br";
    /**
     * Swedish
     */
    HubSpotFormLocale["SWEDISH"] = "sv";
    /**
     * Chinese
     */
    HubSpotFormLocale["CHINESE"] = "zh-cn";
    /**
     * Chinese (Hong Kong)
     */
    HubSpotFormLocale["CHINESE_HONG_KONG"] = "zh-hk";
})(HubSpotFormLocale || (HubSpotFormLocale = {}));

// Hook
var cachedScripts = [];
function useScript(src, async, addToHead) {
    if (async === void 0) { async = true; }
    if (addToHead === void 0) { addToHead = false; }
    var _a = useState(false), loaded = _a[0], setLoaded = _a[1];
    var _b = useState(false), error = _b[0], setError = _b[1];
    useEffect(function () {
        // If cachedScripts array already includes src that means another instance ...
        // ... of this hook already loaded this script, so no need to load again.
        if (cachedScripts.includes(src)) {
            setLoaded(true);
            setError(false);
        }
        else {
            cachedScripts.push(src);
            // Create script
            var script_1 = document.createElement('script');
            script_1.src = src;
            script_1.async = async;
            // Script event listener callbacks for load and error
            var onScriptLoad_1 = function () {
                setLoaded(true);
                setError(false);
            };
            var onScriptError_1 = function () {
                // Remove from cachedScripts we can try loading again
                var index = cachedScripts.indexOf(src);
                if (index >= 0) {
                    cachedScripts.splice(index, 1);
                }
                script_1.remove();
                setLoaded(true);
                setError(true);
            };
            script_1.addEventListener('load', onScriptLoad_1);
            script_1.addEventListener('error', onScriptError_1);
            // Add script to document head if required, otherwise to the body
            addToHead
                ? document.head.appendChild(script_1)
                : document.body.appendChild(script_1);
            // Remove event listeners on cleanup
            return function () {
                script_1.removeEventListener('load', onScriptLoad_1);
                script_1.removeEventListener('error', onScriptError_1);
            };
        }
    }, [src]); // Only re-run effect if script src changes
    return [loaded, error];
}

var HubspotContext = createContext({
    loaded: false,
    error: false
});
var useHubspotContext = function () { return useContext(HubspotContext); };
var HubspotProvider = function (_a) {
    var async = _a.async, addToHead = _a.addToHead, children = _a.children;
    // Attach hubspot script to the document
    var _b = useScript('https://js.hsforms.net/forms/v2.js', async, addToHead), loaded = _b[0], error = _b[1];
    return (React.createElement(HubspotContext.Provider, { value: { loaded: loaded, error: error } }, children));
};

var useHubspotForm = function (props) {
    var _a = useHubspotContext(), loaded = _a.loaded, error = _a.error;
    var _b = useState(false), formCreated = _b[0], setFormCreated = _b[1];
    useEffect(function () {
        if (typeof window !== 'undefined' && window) {
            var windowWithHubspot = window;
            if (loaded && windowWithHubspot.hbspt && !formCreated) {
                windowWithHubspot.hbspt.forms.create(props);
                setFormCreated(true);
            }
        }
    }, [loaded, formCreated, setFormCreated]);
    return { loaded: loaded, formCreated: formCreated, error: error };
};

export { HubSpotFormLocale, HubspotProvider, useHubspotContext, useHubspotForm };