solid-awesome-hooks/dist/index/useClickOutside.js

A collection of awesome hooks for solid-js

import { createEffect, createSignal, onCleanup } from "solid-js";
export const useClickOutside = (
/** Callback to run when click is outside target element */
callback, 
/** Hook options */
options) => {
    const [elementRef, setElementRef] = createSignal();
    const listenToEvent = () => options?.enabled() ?? true;
    createEffect(() => {
        const element = elementRef();
        if (!listenToEvent() || !element)
            return;
        const handleClick = (e) => {
            if (!e.composedPath().includes(element))
                callback(e);
        };
        document.addEventListener("click", handleClick);
        onCleanup(() => {
            document.removeEventListener("click", handleClick);
        });
    });
    return setElementRef;
};