Skip to main content

useOutsidePointerDown

특정 요소 외부에서 마우스 또는 터치 이벤트가 발생할 때 호출되는 콜백을 등록하는 커스텀 훅입니다.

지정된 요소(ref로 지정된 요소) 외부에서 사용자가 마우스를 클릭하거나, 터치 이벤트가 발생할 때마다 제공된 callback 함수를 호출합니다.

모바일 환경에서는 touchstart, 데스크탑 환경에서는 mousedown 이벤트를 감지합니다.


Code​

🔗 실제 구현 코드 확인

Interface​

typescript
function useOutsidePointerDown<T extends HTMLElement>(
  callback: (targetElement: T) => void,
  options?: {
    excludeRefs: React.RefObject<HTMLElement>[];
  }
): React.RefObject<T>;

Usage​

typescript
import { useMemo, useState } from 'react';
import { useOutsidePointerDown } from '@modern-kit/react';

const Example = () => {
  const [number, setNumber] = useState(0);

  const excludeRef = useRef<HTMLDivElement>(null);
  const targetRef = useOutsidePointerDown<HTMLDivElement>(() => {
    setNumber(number + 1);
  }, {
    excludeRefs: [excludeRef], // 외부 클릭 및 터치 감지를 제외할 요소의 ref 배열입니다.
  });
  
  const outerBoxStyle = useMemo(() => {
    return { /* ... */ };
  }, []);

  const InnerBoxStyle = useMemo(() => {
    return { /* ... */ };
  }, []);

  const ExcludeBoxStyle = useMemo(() => {
    return { /* ... */ };
  }, []);

  return (
    <div style={outerBoxStyle}>
      <h3>Target Box 외부를 클릭해보세요!<br />(Exclude Box는 클릭 감지에 제외됩니다.)</h3>
      <p>number: {number}</p> 

      <div ref={targetRef} style={InnerBoxStyle}>
        <h3>Target Box</h3>
      </div>

      <div ref={excludeRef} style={ExcludeBoxStyle}>
        <h3>Exclude Box</h3>
      </div>
    </div>
  );
};

Note​