@svelte-bin/clickoutside

@svelte-bin/clickoutside

With the clickoutside action, a callback function will be fired whenever the user clicks outside of the DOM node the action is applied to.

Installation

npm  i @svelte-bin/clickoutside

Usage

<script>
	import { clickoutside } from '@svelte-bin/clickoutside';
	let enabled = false;
</script>

<div
	use:clickoutside={{
		enabled,
		callback: () => {
			alert('outside clicked');
		}
	}}
>
	<button type="button" on:click={() => (enabled = !enabled)}>
		Click Outside: {enabled ? 'on' : 'off'}
	</button>
	<div>Click outside</div>
</div>

Params

Param	Description
enabled	Sets the action to an enabled state if true, if false, action will not trigger
callback	The callback to be fired once the user clicks outside of the DOM node

Definition

import type { Action } from 'svelte/action';

export interface ClickOutSideConfig {
	enabled: boolean;
	callback: (any) => unknown;
}

export interface ClickOutSideAttribute {}
export type clickoutsideAction = Action<HTMLElement, ClickOutSideConfig, ClickOutSideAttribute>;