useOutside

Run a callback when an event has triggered outside the node.

<script lang="ts">
	import { useOutside } from 'lithesome';

	let outside = $state(false);
	let count = $state(0);
</script>

<div class="flex flex-col items-center">
	<button
		type="button"
		class="rounded-md bg-black px-24 py-12 text-white dark:bg-white dark:text-black"
		use:useOutside={{
			callback() {
				outside = true;
				if (outside) count++;
			}
		}}
		onclick={() => {
			outside = false;
			count = 0;
		}}
	>
		Click outside
	</button>

	{#if outside}
		<p class="select-none">Clicked outside {count} time{count === 1 ? '' : 's'}.</p>
	{/if}
</div>

Property	Type	Description
`callback` *	`() => void`	The code to run when the outside event has been triggered.
`exclude`	`HTMLElement \| HTMLElement[]`	The elements to exlcude from triggering the outside event.
`on`	`DocumentEventMap`	The event to trigger the outside callback.

<script>
	import { useOutside } from 'lithesome';
</script>

<div
	use:useOutside={{
		callback() {
			alert('outside');
		}
	}}
>
	<!-- content... -->
</div>

Excluding elements

If you want to exlude elements from triggering the callback, pass those elements to the exclude property.

<script>
	import { useOutside } from 'lithesome';

	let visible = $state(false);
	let btn = $state(null);
</script>

<button bind:this={btn} onclick={() => (visible = !visible)}>Toggle</button>

{#if visible}
	<div
		use:useOutside={{
			callback() {
				visible = false;
			},
			exlude: btn
		}}
	>
		<!-- content... -->
	</div>
{/if}

The "exclude" property can take either a singular element or an array of elements.

Event

The default event to run the callback is click. But you can change this by passing the on property.

<script>
	import { useOutside } from 'lithesome';
</script>

<div
	use:useOutside={{
		callback() {
			alert('outside');
		},
		on: 'mouseleave'
	}}
>
	<!-- content... -->
</div>