@modern-kit/react/dist/components/LazyImage/index.cjs

modern-kit/react

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var hooksUseIntersectionObserver = require('../../hooks/useIntersectionObserver/index.cjs');
var hooksUseMergeRefs = require('../../hooks/useMergeRefs/index.cjs');
require('../../hooks/usePreservedCallback/index.cjs');
require('@modern-kit/utils');
require('../../utils/mergeRefs/index.cjs');

const LazyImage = React.forwardRef(
  ({ src, threshold, root, rootMargin, ...restProps }, ref) => {
    const { ref: imgRef } = hooksUseIntersectionObserver.useIntersectionObserver({
      onIntersectStart: (entry) => {
        const targetImgElement = entry.target;
        targetImgElement.src = src;
      },
      calledOnce: true,
      threshold,
      root,
      rootMargin
    });
    return /* @__PURE__ */ jsxRuntime.jsx("img", { ref: hooksUseMergeRefs.useMergeRefs(ref, imgRef), ...restProps });
  }
);
LazyImage.displayName = "LazyImage";

exports.LazyImage = LazyImage;
//# sourceMappingURL=index.cjs.map