OutsideClick

useOutsideClickEffect의 기능을 선언적으로 처리하는 컴포넌트입니다.

OutsideClick로 감싸진 컴포넌트 외부를 클릭하는 경우 callback이 실행됩니다.

as 속성을 통해 OutsideClick 컴포넌트의 원하는 태그로 변경 할 수 있습니다. (아래 예제를 참고해주세요)

Code

🔗 실제 구현 코드 확인

Interface

typescript

type NonHaveChildElements =
  | 'input'
  | 'textarea'
  | 'img'
  | 'br'
  | 'hr'
  | 'meta'
  | 'link'
  | 'base'
  | 'col'
  | 'embed'
  | 'source'
  | 'track'
  | 'wbr';

type NoChildren<Tag extends ElementType> = Tag extends NonHaveChildElements
  ? { children?: never }
  : { children: ReactNode };

type AsRequired<Tag extends ElementType> = Tag extends 'div'
  ? { as?: Tag }
  : { as: Tag };

type AllowedTagName<Tag extends ElementType> =
  Tag extends keyof HTMLElementTagNameMap
    ? HTMLElementTagNameMap[Tag]
    : HTMLElement;

type OutsideClickProp<Tag extends ElementType> = 
  ComponentProps<Tag> &
  AsRequired<Tag> &
  NoChildren<Tag> & {
    callback: () => void;
  };

const OutsideClick: <Tag extends ElementType = 'div'>(
  { as, children, callback, ...props }: OutsideClickProps<Tag>,
  ref: React.ForwardedRef<any>
) => JSX.Element;

Usage

Default

typescript

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

const DefaultExample = () => {
  const style = {
    width: '500px',
    height: '100px',
    backgroundColor: 'skyBlue',
  };
  return (
    <OutsideClick
      style={style}
      callback={() => console.log('DefaultExample Outside Clicked!')}>
      외부 영역 클릭 후 콘솔을 확인해주세요.
    </OutsideClick>
  );
};

As-Example

typescript

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

const AsExample = () => {
  const style = {
    width: "300px",
    height: "50px",
  };
  return (
    // OutsideClick 컴포넌트의 "제네릭 타입" 지정 후 "as" props를 입력해주세요. 
    // 원활한 타입 추론이 가능합니다.
    <OutsideClick<'input'> 
      as="input"
      placeholder="외부 영역 클릭 후 콘솔을 확인해주세요."
      callback={() => console.log('As-Example Outslide Clicked!')}
      style={style}
    />
  );
};