@modern-kit/react/dist/components/InView/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 utilsPolymorphicForwardRef = require('../../utils/polymorphicForwardRef/index.cjs');
var hooksUseMergeRefs = require('../../hooks/useMergeRefs/index.cjs');
var componentsSlot = require('../Slot/index.cjs');
require('../../hooks/usePreservedCallback/index.cjs');
require('@modern-kit/utils');
require('../../utils/mergeRefs/index.cjs');

const IN_VIEW_ERROR_MESSAGE = "InView\uB294 asChild\uAC00 true\uC77C \uACBD\uC6B0 children\uC73C\uB85C \uC720\uD6A8\uD55C React \uC694\uC18C\uB9CC\uC744 \uD5C8\uC6A9\uD569\uB2C8\uB2E4. \uB610\uD55C, \uB2E8\uC77C \uC694\uC18C\uB9CC \uD5C8\uC6A9\uD569\uB2C8\uB2E4.";
const InView = utilsPolymorphicForwardRef.polymorphicForwardRef(
  ({ children, as = "div", asChild = false, ...props }, ref) => {
    const {
      onIntersectStart,
      onIntersectEnd,
      calledOnce,
      enabled,
      root,
      threshold,
      rootMargin,
      ...restProps
    } = props;
    const InViewWrapper = asChild ? componentsSlot.Slot : as;
    const { ref: intersectionObserverRef } = hooksUseIntersectionObserver.useIntersectionObserver({
      onIntersectStart,
      onIntersectEnd,
      calledOnce,
      enabled,
      root,
      threshold,
      rootMargin
    });
    if (asChild && !React.isValidElement(children)) {
      throw new Error(IN_VIEW_ERROR_MESSAGE);
    }
    return /* @__PURE__ */ jsxRuntime.jsx(
      InViewWrapper,
      {
        ref: hooksUseMergeRefs.useMergeRefs(ref, intersectionObserverRef),
        ...restProps,
        children
      }
    );
  }
);

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