@modern-kit/react
Version:
50 lines (47 loc) • 1.61 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import React from 'react';
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver/index.mjs';
import { polymorphicForwardRef } from '../../utils/polymorphicForwardRef/index.mjs';
import { useMergeRefs } from '../../hooks/useMergeRefs/index.mjs';
import { Slot } from '../Slot/index.mjs';
import '../../hooks/usePreservedCallback/index.mjs';
import '@modern-kit/utils';
import '../../utils/mergeRefs/index.mjs';
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 = polymorphicForwardRef(
({ children, as = "div", asChild = false, ...props }, ref) => {
const {
onIntersectStart,
onIntersectEnd,
calledOnce,
enabled,
root,
threshold,
rootMargin,
...restProps
} = props;
const InViewWrapper = asChild ? Slot : as;
const { ref: intersectionObserverRef } = useIntersectionObserver({
onIntersectStart,
onIntersectEnd,
calledOnce,
enabled,
root,
threshold,
rootMargin
});
if (asChild && !React.isValidElement(children)) {
throw new Error(IN_VIEW_ERROR_MESSAGE);
}
return /* @__PURE__ */ jsx(
InViewWrapper,
{
ref: useMergeRefs(ref, intersectionObserverRef),
...restProps,
children
}
);
}
);
export { InView };
//# sourceMappingURL=index.mjs.map