SolidJS•13mo ago

problem with "use:" and custom directives in tsx

I copied the custom directive from the docs

import { onCleanup } from 'solid-js';
export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener('click', onClick);
  onCleanup(() => document.body.removeEventListener('click', onClick));
}

import { onCleanup } from 'solid-js';
export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener('click', onClick);
  onCleanup(() => document.body.removeEventListener('click', onClick));
}

and then I used here like this

     <div
        class='select-component'
        onClick={toggleDropdown}
        use:clickOutside={() => setIsOpen(false)}
      >

     <div
        class='select-component'
        onClick={toggleDropdown}
        use:clickOutside={() => setIsOpen(false)}
      >

But it marks as a error when I use it like that in the tsx file. It works correctly as expected tho. Is there any way to get rid of the wavy red line ? The error says:

Type '{ children: Element[]; class: string; onClick: () => void; "use:clickOutside": () => false; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'. Property 'use:clickOutside' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

4 Replies

Alex Lohr•13mo ago

You need to extend the solid-js namespace as explained here: https://www.solidjs.com/docs/latest/api#special-jsx-attributes - in your case the Directives interface. It's a bit hidden in the docs right now. We're working on them.

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

akerbeltz•13mo ago

Oh thanks where i have to put that lines? where is the file to configure that?

high1•13mo ago

You can do that in any file that's used for TS specific stuff, or you can create a new one Doesn't have to have a specific name, the extension needs to be .d.ts In vite samples, there's vite-env.d.ts It's a good candidate for this

akerbeltz•13mo ago

@lexlohr @.high1 Thanks!! it worked 😄

Gaming

Programming

problem with "use:" and custom directives in tsx