Overlays

ClickAwayListener

Headless utility that calls a function when the user clicks or taps outside a subtree.

import { ClickAwayListener } from '@lostgradient/cinder/click-away-listener';
overlayutility
01

Overview

Headless utility that calls a function when the user clicks or taps outside a subtree.

Usage

svelte 
<script lang="ts">
  import { ClickAwayListener } from '@lostgradient/cinder/click-away-listener';
</script>

Guidance

Use When

  • Building a custom inline-edit field, custom dropdown, or any overlay that should close on outside interaction.

Avoid When

  • Using Popover, Dropdown, or Modal — those handle click-away internally.
Live preview
02

When to use

Use when
  • Building a custom inline-edit field, custom dropdown, or any overlay that should close on outside interaction.
Avoid when
  • Using Popover, Dropdown, or Modal — those handle click-away internally.
03

Examples

Basic click-away listener

Calls a function when the user presses a pointer outside the wrapped subtree.

04

Props

Props for click-away-listener
Name Type Default Required Bindable Description
onClickAway (event: PointerEvent | MouseEvent | TouchEvent) => void req Called with the triggering PointerEvent (or MouseEvent/TouchEvent on browsers that do not support the Pointer Events API) when the user presses a pointer device outside the root element.
enabled boolean true When false the document listener is detached and onClickAway is never called. Defaults to true.
children snippet req Content rendered inside the root element. Required.