react-img-component/dist/index.mjs.map

A responsive lazy-loading image component for React

{"version":3,"sources":["../src/Image.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\r\n\r\n// Define prop interface without extending HTML attributes\r\ninterface ReactImageProps {\r\n  src: string;\r\n  alt: string;\r\n  placeholderSrc?: string;\r\n  [key: string]: any; // For additional props\r\n}\r\n\r\n// Simple function declaration with JSX return type\r\nfunction ReactImage(props: ReactImageProps): JSX.Element {\r\n  const { src, alt, placeholderSrc, ...restProps } = props;\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const imgRef = useRef<HTMLImageElement>(null);\r\n\r\n  useEffect(() => {\r\n    const observer = new IntersectionObserver(\r\n      (entries) => {\r\n        entries.forEach((entry) => {\r\n          if (entry.isIntersecting) {\r\n            setIsVisible(true);\r\n            observer.disconnect();\r\n          }\r\n        });\r\n      },\r\n      { threshold: 0.1 }\r\n    );\r\n\r\n    if (imgRef.current) observer.observe(imgRef.current);\r\n\r\n    return () => observer.disconnect();\r\n  }, []);\r\n\r\n  return (\r\n    <img\r\n      ref={imgRef}\r\n      src={isVisible ? src : placeholderSrc}\r\n      alt={alt}\r\n      style={{\r\n        filter: isVisible ? 'none' : 'blur(10px)',\r\n        transition: 'filter 0.3s ease-in-out',\r\n      }}\r\n      {...restProps}\r\n    />\r\n  );\r\n}\r\n\r\nexport default ReactImage;\r\n"],"mappings":";AAAA,SAAgB,UAAU,WAAW,cAAc;AAmC/C;AAxBJ,SAAS,WAAW,OAAqC;AACvD,QAAM,EAAE,KAAK,KAAK,gBAAgB,GAAG,UAAU,IAAI;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,SAAS,OAAyB,IAAI;AAE5C,YAAU,MAAM;AACd,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,gBAAQ,QAAQ,CAAC,UAAU;AACzB,cAAI,MAAM,gBAAgB;AACxB,yBAAa,IAAI;AACjB,qBAAS,WAAW;AAAA,UACtB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,EAAE,WAAW,IAAI;AAAA,IACnB;AAEA,QAAI,OAAO,QAAS,UAAS,QAAQ,OAAO,OAAO;AAEnD,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK,YAAY,MAAM;AAAA,MACvB;AAAA,MACA,OAAO;AAAA,QACL,QAAQ,YAAY,SAAS;AAAA,QAC7B,YAAY;AAAA,MACd;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}