@navinc/base-react-components/dist/use-tealium-utag.js

Nav's Pattern Library

import { noop } from '@navinc/utils';
import { useEffect, useState } from 'react';
/**
 * @example
 * import { waitForTealium } from '@navinc/base-react-components'
 *
 * const tealiumData = await waitForTealium()
 */
export const waitForTealium = () => {
    return new Promise((resolve, reject) => {
        let retriesRemaining = 50;
        const tryForTealium = () => {
            var _a;
            const tealiumData = (_a = global === null || global === void 0 ? void 0 : global.utag) === null || _a === void 0 ? void 0 : _a.data;
            if (tealiumData != null) {
                resolve(tealiumData);
            }
            else {
                if (retriesRemaining > 0) {
                    --retriesRemaining;
                    setTimeout(tryForTealium, 50);
                }
                else {
                    reject(new Error('Timed out waiting for tealium'));
                }
            }
        };
        tryForTealium();
    });
};
/**
 * @example
 * import { useTealiumUtag } from '@navinc/base-react-components'
 *
 * const { tealiumId, isTealiumLoading } = useTealiumUtag()
 * isTealiumLoading ? <div>Loading...</div> : <div>Tealium ID: {tealiumId}</div>
 */
export const useTealiumUtag = ({ onError = noop } = {}) => {
    const [data, setData] = useState();
    const [loading, setIsLoading] = useState(true);
    // wait for tealium to be available before returning data
    useEffect(() => {
        waitForTealium()
            .then((res) => {
            setData(res);
            setIsLoading(false);
        })
            .catch((error) => {
            onError(error);
        })
            .finally(() => setIsLoading(false));
    }, [onError]);
    const tealiumId = data === null || data === void 0 ? void 0 : data.tealium_visitor_id;
    return { tealiumId, loading, data };
};
//# sourceMappingURL=use-tealium-utag.js.map