Open sviripa opened 4 months ago
Hey there! I think this is a great one to add!
To ensure it works with reactive values and across function boundaries, we'll want it to work like the following examples, one is passing a Getter
and the other is passing a Box
.
<script lang="ts">
import { useClickOutside } from "runed";
let container = $state<HTMLElement>();
useClickOutside(() => container, () => console.log("clicked outside of the container"));
</script>
<div bind:this={container}></div>
or
<script lang="ts">
import { useClickOutside, box } from "runed";
const container = box<HTMLElement | null>(null)
useClickOutside(container, () => console.log("clicked outside of the container"));
</script>
<div bind:this={container.value}></div>
--
A good reference point code-wise is the useElementSize
, which follows a similar pattern.
We'd also want to include the ability to stop
and start
this functionality programmatically. It would start by default, and invoking start
again wouldn't do anything unless it is stopped.
<script lang="ts">
import { useClickOutside, box } from "runed";
const container = box<HTMLElement | null>(null)
const outsideClick = useClickOutside(container, () => console.log("clicked outside of the container"));
</script>
<button onclick={outsideClick.stop}>Stop listening for outside clicks</button>
<button onclick={outsideClick.start}>Start listening again</button>
<div bind:this={container.value}></div>
If you'd like to take a stab at this, feel free!
Makes sense to me. I'll work on this
Feel free to submit an early draft PR if you'd like some feedback!
Describe the feature in detail (code, mocks, or screenshots encouraged)
A utility function which accepts a reference to an instance of
HtmlElement
and a callback function and invokes a callback function when the user clicks outside of the givenHtmlElement
instance.Here's how I imagine it would look like in action:
Alternatively, it could create a reference inside of
useClickOutside
and return it to the component to be attached.What type of pull request would this be?
New Feature
Provide relevant links or additional information.
No response