How to use directives with components in Typescript? | SolidJS | Page 1

Hello, I wanna use directives in my project. My pet project - https://github.com/XPahanX/editor
I have tried many things, but nothing has helped.
I'll show you what code I imagine:

import { Component, createSignal, ParentComponent, Show } from 'solid-js';
import type clickOutside from '../directives/click-outside';

const EditorBlockMenu: Component = () => {
    return (
        <div class='editor-block-menu'>
            <div><button>Delete</button></div>
            <div><button>Move Up</button></div>
            <div><button>Move Down</button></div>
        </div>
    )
}

const EditorBlockBtn: ParentComponent = () => {
    const [toggle, setToggle] = createSignal(false)
    const isToggle = () => setToggle(!toggle())

    return (
        <div classList={{'editor-block-btn': !toggle()}}>
            <button onClick={isToggle}>
                
            </button>
            <Show
                when={toggle()}
                fallback={<></>}
            >
                <EditorBlockMenu use:clickOutside={() => setToggle(false)}/>
            </Show>
        </div>
    )
}

export default EditorBlockBtn;

And

import { onCleanup } from "solid-js";

// https://www.solidjs.com/tutorial/bindings_directives?solved
// need fix
export default function clickOutside(el:any, accessor:any) {
  const onClick = (e:any) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener("click", onClick);

  onCleanup(() => document.body.removeEventListener("click", onClick));
}

A function clickOutside from the tutorial on the official website that I do not know how to change for Typescript. Plus, using use inside the component does not work. What am I doing wrong and how can I solve the problem?

GitHub

GitHub - XPahanX/editor

Contribute to XPahanX/editor development by creating an account on GitHub.

#How to use directives with components in Typescript?