clickoutside.clickoutside.md

Home > @svelte-put/clickoutside > clickoutside

clickoutside variable

Dispatch a clickoutside CustomEvent on click outside of node

Signature:

clickoutside: Action<HTMLElement, Partial<ClickOutsideParameters>, ClickOutsideAttributes>;

Remarks

As with any svelte action, clickoutside should be use with element and not component.

<-- correct usage-->
<div use:clickoutside />

<-- incorrect usage-->
<Component use:clickoutside />

Example

Typical usage to close a modal / overlay when backdrop is clicked on

<script lang="ts">
 import { clickoutside } from '@svelte-put/clickoutside';

 let containerNode: HTMLElement;
 let modal = false;

 function onClickOutside(event: CustomEvent<MouseEvent>) {
   console.log('Forwarded event:', event);
   modal = false;
 }
</script>

<section class="relative" bind:this={containerNode}>
 <button
   type="button"
   class="mt-10 bg-primary p-6 drop-shadow-lg hover:bg-orange-700"
   on:click={() => (modal = true)}
 >
     Click to open modal
   </button>
 {#if modal}
   <aside
     class="absolute top-0 left-0 right-0 bottom-0"
     use:clickoutside={{ limit: { parent: containerNode }}}
     on:clickoutside={onClickOutside}
   >
     ...some modal content...
   </aside>
 {/if}
</section