snapme

1import { useEffect, useState } from "react"
2
3/* Pengganti paket `use-image` (DECISIONS M4): satu berkas, tanpa dependensi.
4   Hasil hanya dikembalikan saat `src`-nya masih cocok, supaya foto yang diulang
5   tidak menampilkan gambar lama selama dataURL baru dimuat. */
6
7interface LoadedImage {
8  src: string
9  image: HTMLImageElement
10}
11
12export function useHtmlImage(
13  src: string | undefined
14): HTMLImageElement | undefined {
15  const [loaded, setLoaded] = useState<LoadedImage | null>(null)
16
17  useEffect(() => {
18    if (src === undefined) {
19      return
20    }
21
22    let active = true
23    const image = new window.Image()
24    image.onload = () => {
25      if (active) {
26        setLoaded({ src, image })
27      }
28    }
29    image.src = src
30
31    return () => {
32      active = false
33      image.onload = null
34    }
35  }, [src])
36
37  return loaded !== null && loaded.src === src ? loaded.image : undefined
38}
39