OutsideClick

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

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

<OutsideClick callback={callback}>{children}</OutsideClick>

Attributes

제네릭을 제공하여<OutsideClick>에 ElementType을 지정할 수 있습니다.

필요한 HTMLAttributes를 사용할 수 있습니다.

function Component() {
  return (
    <OutsideClick<'input'>
      as="input"
      callback={() => {
        console.log('outside clicked!');
      }}
    />
  );
}

Caveats

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

NonHaveChildElements에 속한 태그는 자식이 존재하지 않으므로 self-closing tags를 사용합니다.

Examples

import { OutsideClick } from '@toss/react';

export default function App() {
  return (
    <>
      <OutsideClick callback={() => alert('Outside Clicked!')}>
        Inside
      </OutsideClick>
      <div>Click me</div>
    </>
  );
}