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

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

import { useState, useEffect } from 'react';
// https://typesafe.blog/article/fetch-images-with-a-react-hook
export const useImage = (src) => {
    const [hasLoaded, setHasLoaded] = useState(false);
    const [hasError, setHasError] = useState(false);
    const [hasStartedInitialFetch, setHasStartedInitialFetch] = useState(false);
    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 };
};