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