useImageStatus

A custom hook that, when the returned ref is assigned to an <img /> tag, returns the image loading status as pending, loading, complete, or error.

Code

🔗 View source code

Interface

typescript

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

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

Returns

Name	Type	Description
ref	(imgElement: HTMLImageElement) => void	Callback ref to attach to the <img /> element
imageStatus	ImageStatus	Current image loading status: 'pending', 'loading', 'complete', or 'error'

Usage

typescript

import { useImageStatus } from '@modern-kit/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>
  );
};