OutsidePointerDownHandler

@modern-kit/useOutsidePointerDown 훅을 선언적으로 활용 할 수 있는 컴포넌트입니다.

컴포넌트 외부 영역 클릭 및 터치 시 onPointerDown 함수를 실행하는 컴포넌트입니다.

다형성(polymorphism)

OutsidePointerDownHandler컴포넌트는 다형성을 위해 as 속성을 지원합니다.

• 기본적으로 div 태그로 자식 요소를 감싸서 렌더링하며, as 속성을 통해 감싸는 Wrapper 요소의 태그를 변경해 렌더링할 수 있습니다. (ex. div -> article)
• 이때, 해당 Wrapper 요소의 외부 영역을 클릭 및 터치 시 onPointerDown 콜백 함수가 호출됩니다.

합성(Composition), 렌더링 위임(Rendering Delegation)

OutsidePointerDownHandler 컴포넌트는 asChild 속성을 통해 합성(Composition), 렌더링 위임(Rendering Delegation) 패턴을 지원합니다.

• asChild 속성이 true라면 Slot 을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링합니다.
• 이때, 자식 요소의 외부 영역을 클릭 및 터치 시 onPointerDown 콜백 함수가 호출됩니다.
  • Slot의 자식은 단일 요소만 허용됩니다.
  • Slot은 자식으로 컴포넌트가 올 경우 forwardRef, props를 허용해야 합니다. 허용하지 않으면 정상적으로 동작하지 않습니다.
  • asChild 속성을 사용 할 경우 Slot 문서를 참고해주세요.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface OutsidePointerDownHandlerProps {
  children: ReactNode;
  onPointerDown: (targetElement: HTMLElement) => void;
  excludeRefs?: React.RefObject<HTMLElement>[];
  asChild?: boolean;
}

typescript

const OutsidePointerDown: PolyForwardComponent<
  'div',
  OutsidePointerDownProps,
  React.ElementType
>;

Usage

Default

typescript

import { OutsidePointerDownHandler } from '@modern-kit/react';

const DefaultExample = () => {
  const excludeRef = useRef<HTMLDivElement>(null);
  const style = {
    // ...
  };
  const excludeStyle = {
    // ...
  };
  return (
    <div style={{ background: 'gray'}}>
      <OutsidePointerDownHandler
        style={style}
        onPointerDown={() => console.log('DefaultExample Outside Clicked!')}
        excludeRefs={[excludeRef]}
      >
        <div>외부 영역 클릭 후 콘솔을 확인해주세요.</div>
      </OutsidePointerDownHandler>
      <div ref={excludeRef} style={excludeStyle}>외부 클릭 및 터치 감지를 제외할 요소의 ref 배열입니다.</div>
    </div>
  );
};

as

typescript

import { OutsidePointerDownHandler } from '@modern-kit/react';

const Example = () => {
  return (
    <OutsidePointerDownHandler
      as="ul"
      placeholder="외부 영역 클릭 후 콘솔을 확인해주세요."
      onPointerDown={() => console.log('As-Example Outside Clicked!')}
    >
      <li>List Item1</li>
      <li>List Item2</li>
    </OutsidePointerDownHandler>
  );
};

asChild

typescript

import { OutsidePointerDownHandler } from '@modern-kit/react';

const AsChildExample = () => {
  return (
    <OutsidePointerDownHandler
      asChild={true}
      onPointerDown={() => console.log('AsChild-Example Outside Clicked!')}
    >
      <input type="text" placeholder="외부 영역 클릭 후 콘솔을 확인해주세요." />
    </OutsidePointerDownHandler>
  );
};