useParentElementClick

props로 받은 Element를 기준으로 부모 요소에 클릭이벤트를 등록합니다.

Description

useParentElementClick은 부모 요소에 클릭이벤트를 등록합니다.

첫번째 인자로 onClickOutside를 받으며 ref를 return 합니다.

onClickOutside는 클릭이벤트가 발생했을 때 실행되는 함수이며, initialRef는 클릭이벤트를 등록할 요소의 자식 요소를 받습니다.

Usage

import {useParentElementClick} from "@shoplflow/utils"
 
const Container = () => {
     const ref = useParentElementClick<HTMLDivElement>(outsideClick);
 
    const outsideClick = () => {
        console.log("outside click");
    }
 
 
    return(
        <div ref={ref}>container</div>
    )
}
// outside 영역 클릭시 outside click 출력
const App = () => {
    return(
        <div>
            <Container />
            outside
        </div>
    )
}

아래 예시와 같이 Modal 컴포넌트에 outSideClick을 전달하며 모달이 열렸을 때 BackDrop을 클릭하면 모달이 닫히도록 구현할 수 있습니다.

const ModalContainer = ({ children, outsideClick = noop, ...rest }: ModalContainerProps) => {
  const ref = useParentElementClick<HTMLDivElement>(outsideClick);
 
  // ...생략
 
  return (
    <Container ref={ref} {...rest}>
      {addPropInChildren}
    </Container>
  );
};

useOutsideClick usePopover