Feature Request: useClickOutside #37
Assignees
Labels
enhancement
New feature or request
planned
The feature/enhancement has been approved and is planned to be implemented.
Comments
|
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 <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 We'd also want to include the ability to <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! |
TGlide
added
the
planned
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the feature in detail (code, mocks, or screenshots encouraged)
A utility function which accepts a reference to an instance of
HtmlElementand a callback function and invokes a callback function when the user clicks outside of the givenHtmlElementinstance.Here's how I imagine it would look like in action:
Alternatively, it could create a reference inside of
useClickOutsideand 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
The text was updated successfully, but these errors were encountered: