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

modern-kit/react

import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver/index.mjs';
import { useMergeRefs } from '../../hooks/useMergeRefs/index.mjs';
import '../../hooks/usePreservedCallback/index.mjs';
import '@modern-kit/utils';
import '../../utils/mergeRefs/index.mjs';

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

export { LazyImage };
//# sourceMappingURL=index.mjs.map