react-lazy-img-observer/dist/cjs/ImageLazy.min.js

A React component for lazy loading images with Intersection Observer

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageLazy=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ImageLazy=({src:e,alt:t,width:r,height:s,className:a,id:n,extraData:i,title:c})=>{const o=(0,react_1.useRef)(null),[u,l]=(0,react_1.useState)(!1);return(0,react_1.useEffect)((()=>{if("undefined"==typeof IntersectionObserver||!o.current)return;const e=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(l(!0),o.current&&(o.current.src=o.current.dataset.src||""),e.unobserve(t.target))}))}),{root:null,rootMargin:"0px",threshold:.5});return e.observe(o.current),()=>{e.disconnect()}}),[e]),(0,jsx_runtime_1.jsx)("img",{ref:o,"data-src":e,alt:t,title:c,className:a,width:r,height:s,loading:"lazy",id:n?.toString(),style:{filter:u?"none":"blur(20px)",transition:"filter 0.9s"},...i})};exports.ImageLazy=ImageLazy,exports.default=ImageLazy;