simple react hook to track loading state of multiple images 🖼️🖼️🖼️
useful to make sure images are fully loaded before running an animation
usage:
```
const { isAllAssetsLoaded, incrementImgCount, handleFailure } = useImageLoadCount(4)
// do something with isAllAssetsLoaded
<Image onLoad={incrementImgCount} onError={handleFailure} />
```
ALT "use client";
import { useCallback, useState } from "react";
export const useImageLoadCount = ({ totalImages }: { totalImages: number }) => {
const [loadedImgCount, setLoadedImgCount] = useState(0);
const [failedLoading, setFailedLoading] = useState(false);
const incrementImgCount = useCallback(() => {
setLoadedImgCount((prev) => prev 1);
}, []);
const handleFailure = useCallback(() => {
setFailedLoading(true);
}, []);
const isAllAssetsLoaded = failedLoading || loadedImgCount === totalImages;
return {
isAllAssetsLoaded,
incrementImgCount,
handleFailure,
};
};