OutsideClick

A component that declaratively handles the functionality of useOutsideClickEffect.

If you click outside the component wrapped in OutsideClick, callback is executed.

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

Attributes

You can assign an ElementType to <OutsideClick>.

You can use HTMLAttributes as needed.

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';

Tags belonging to NonHaveChildElements use self-closing tags because they do not have children.

Examples

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

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