useImageStatus

A custom hook that assigns the returned ref to a <img /> tag and returns a pending, loading, complete, or error status during the image loading proce

Interface

type ImageStatus = 'pending' | 'loading' | 'complete' | 'error';

const useImageStatus: () => {
  ref: (imgElement: HTMLImageElement) => void;
  imageStatus: ImageStatus;
}

Usage

import { useImageStatus } from '@devgrace/react';
import img1 from '../assets/img1.png';

const Example = () => {
  const { ref, imageStatus } = useImageStatus();

  return (
    <div>
      <img 
        ref={ref} 
        width={400} 
        height={400} 
        src={img1} 
        alt='img1' 
      />
      <p>{imageStatus}</p>
    </div>
  );
};