@modern-kit/react/dist/components/InView/index.d.ts

modern-kit/react

import React__default from 'react';
import { UseIntersectionObserverProps } from '../../hooks/useIntersectionObserver/index.js';

interface InViewProps extends UseIntersectionObserverProps {
    children: React__default.ReactNode;
    asChild?: boolean;
}
/**
 * @description `InView`는 `IntersectionObserver`를 선언적으로 활용 할 수 있는 컴포넌트입니다.
 *
 * 관찰 대상이 `viewport`에 노출될 때(`onIntersectStart`) 혹은 나갈 때(`onIntersectEnd`) 특정 action 함수를 호출 할 수 있는 컴포넌트입니다.
 *
 * `@modern-kit/react`의 `useIntersectionObserver` 훅을 사용하여 구현되었습니다.
 *
 * @see https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver
 *
 * `as` 속성을 통해 `다형성(polymorphism)`을 지원합니다:
 * - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 Wrapper 요소의 태그를 변경해 렌더링할 수 있습니다. (ex. div -> article)
 * - 이때 해당 Wrapper 요소가 `IntersectionObserver`의 관찰 대상입니다.
 *
 * `asChild` 속성을 통해 `합성(Composition)`, `렌더링 위임(Rendering Delegation)` 패턴을 지원합니다:
 * - `asChild` 속성이 `true`라면 `Slot`을 통해 래퍼 요소 없이 자식 요소를 렌더링합니다.
 * - 이때, 자식 요소가 `IntersectionObserver`의 관찰 대상입니다.
 * - `asChild`를 사용 할 경우 아래 링크를 참고하세요.
 *
 * @see https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot
 *
 *
 * @param {InViewProps} props - 컴포넌트에 전달되는 속성들입니다.
 * @param {React.ReactNode} props.children - 관찰할 자식 요소입니다.
 * @param {string} props.as - 관찰할 요소의 타입입니다. 기본값은 `div`입니다.
 * @param {boolean} [props.asChild=false] - 자식 요소를 래퍼 요소 없이 렌더링하고, 관찰 대상으로 설정할지 여부입니다. `true`일 경우 `Slot` 컴포넌트를 통해 자식 요소에 직접 props를 전달합니다.
 * @param {(entry: IntersectionObserverEntry) => void} props.onIntersectStart - 타겟 요소가 viewport 내에 들어갈 때 호출되는 콜백 함수입니다.
 * @param {(entry: IntersectionObserverEntry) => void} props.onIntersectEnd - 타겟 요소가 viewport에서 나갈 때 호출되는 콜백 함수입니다.
 * @param {number | number[]} props.threshold - 관찰을 시작할 viewport의 가시성 비율입니다.
 * @param {Element | Document | null} props.root - 교차할 때 기준이 되는 root 요소입니다. 기본값은 `null`이며 이는 viewport를 의미합니다.
 * @param {string} props.rootMargin - 루트 요소에 대한 마진을 지정합니다. 이는 뷰포트 또는 루트 요소의 경계를 확장하거나 축소하는데 사용됩니다.
 * @param {boolean} props.enabled - Observer를 활성화할지 여부를 나타냅니다. `false`일 경우 Observer가 작동하지 않습니다.
 * @param {boolean} props.calledOnce - 요소가 교차할 때 콜백을 `한 번`만 호출할지 여부를 나타냅니다.
 *
 * @returns {JSX.Element}
 *
 * @example
 * ```tsx
 * // default
 * <InView onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>
 *   <div>Contents</div>
 * </InView>
 * ```
 *
 * @example
 * ```tsx
 * // as: ul
 * <InView as="ul" onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>
 *   <li>List Item1</li>
 *   <li>List Item2</li>
 * </InView>
 * ```
 *
 * @example
 * ```tsx
 * // asChild
 * <InView asChild onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>
 *   <div>Contents</div>
 * </InView>
 * ```
 */
declare const InView: Omit<React__default.ForwardRefExoticComponent<Omit<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    ref?: ((instance: HTMLDivElement | null) => void) | React__default.RefObject<HTMLDivElement> | null | undefined;
}, "as" | keyof InViewProps> & InViewProps & {
    as?: "div" | undefined;
}>, never> & (<T extends React__default.ElementType = "div">(props: ((T extends React__default.ElementType ? React__default.ComponentPropsWithRef<T> : {
    children?: React__default.ReactNode;
}) extends infer T_1 ? T_1 extends (T extends React__default.ElementType ? React__default.ComponentPropsWithRef<T> : {
    children?: React__default.ReactNode;
}) ? T_1 extends any ? Omit<T_1, "as" | keyof InViewProps> : never : never : never) & InViewProps & {
    as?: T | undefined;
}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null);

export { InView };