OutsideClickHandler

PreviousNext

Fires when a pointer event happens outside its children.

import { OutsideClickHandler, Button } from "@/rl-ui";

<OutsideClickHandler onOutsideClick={() => setOpen(false)}>
<Button>Inside</Button>
</OutsideClickHandler>

Examples

Panel content

Wrap popover-like UI; outside clicks typically close the panel.

import { OutsideClickHandler, Text, Button, Space } from "@/rl-ui";

<OutsideClickHandler
className="rounded-8 border border-border p-4"
onOutsideClick={() => setOpen(false)}
>
<Space direction="vertical" size="small">
  <Text variant="heading-03">Filters</Text>
  <Text variant="body-short-01">Click outside this panel to dismiss.</Text>
  <Button variant="primary" size="small">Apply</Button>
</Space>
</OutsideClickHandler>

Disabled listener

import { OutsideClickHandler, Button } from "@/rl-ui";

<OutsideClickHandler disabled onOutsideClick={() => {}}>
<Button variant="secondary">Outside clicks ignored</Button>
</OutsideClickHandler>

Inline display

import { OutsideClickHandler, Badge } from "@/rl-ui";

<OutsideClickHandler display="inline-flex" onOutsideClick={() => {}}>
<Badge color="blue">Inline wrapper</Badge>
</OutsideClickHandler>

API

PropTypeDefaultDescription
childrenReactNode—Wrapped tree (required).
onOutsideClick(event: MouseEvent) => void—Fires when click starts and ends outside.
allowed(target: HTMLElement) => boolean—Treat matching targets as inside (skip handler).
disabledbooleanfalseDisable listening.
useCapturebooleanfalseUse capture phase for listeners.
displayCSSProperties["display"]—CSS display on the wrapper.
classNamestring—Wrapper className.
styleCSSProperties—Inline styles on the wrapper.