useClickOutside
A function that calls a callback when a click event is triggered outside of a given container element.
Demo
Has not clicked yet
Usage
<script lang="ts">
import { box, useClickOutside } from "runed";
const container = box<HTMLDivElement | null>(null);
useClickOutside(container, () => {
console.log("clicked outside of container");
});
</script>
<main>
<div bind:this={container.value}>Container</div>
<button>Click Me</button>
</main>
You can also programmatically pause and resume useClickOutside using the start and stop functiosn returned by useClickOutside.
<script lang="ts">
import { box, useClickOutside } from "runed";
const container = box<HTMLDivElement | null>(null);
const outsideClick = useClickOutside(container, () => {
console.log("clicked outside of container");
});
</script>
<main>
<button onclick={outsideClick.stop}>Stop listening for outside clicks</button>
<button onclick={outsideClick.start}>Start listening again</button>
<div bind:this={container.value}></div>
</main>