@open-tender/utils/dist/cjs/hooks/useImage.js

A library of utils for use with Open Tender applications that utilize our cloud-based Order API.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useImage = void 0;
const react_1 = require("react");
// https://typesafe.blog/article/fetch-images-with-a-react-hook
const useImage = (src) => {
    const [hasLoaded, setHasLoaded] = (0, react_1.useState)(false);
    const [hasError, setHasError] = (0, react_1.useState)(false);
    const [hasStartedInitialFetch, setHasStartedInitialFetch] = (0, react_1.useState)(false);
    (0, react_1.useEffect)(() => {
        setHasStartedInitialFetch(true);
        setHasLoaded(false);
        setHasError(false);
        const image = new Image();
        if (src)
            image.src = src;
        const handleError = () => {
            setHasError(true);
        };
        const handleLoad = () => {
            setHasLoaded(true);
            setHasError(false);
        };
        image.onerror = handleError;
        image.onload = handleLoad;
        return () => {
            image.removeEventListener('error', handleError);
            image.removeEventListener('load', handleLoad);
        };
    }, [src]);
    return { hasLoaded, hasError, hasStartedInitialFetch };
};
exports.useImage = useImage;