react-img-component/dist/index.mjs

A responsive lazy-loading image component for React

// src/Image.tsx
import { useState, useEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
function ReactImage(props) {
  const { src, alt, placeholderSrc, ...restProps } = props;
  const [isVisible, setIsVisible] = useState(false);
  const imgRef = useRef(null);
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            observer.disconnect();
          }
        });
      },
      { threshold: 0.1 }
    );
    if (imgRef.current) observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, []);
  return /* @__PURE__ */ jsx(
    "img",
    {
      ref: imgRef,
      src: isVisible ? src : placeholderSrc,
      alt,
      style: {
        filter: isVisible ? "none" : "blur(10px)",
        transition: "filter 0.3s ease-in-out"
      },
      ...restProps
    }
  );
}
var Image_default = ReactImage;
export {
  Image_default as default
};
//# sourceMappingURL=index.mjs.map