JSX attributes

use:*

These are custom directives. In a sense this is just syntax sugar over ref but allows us to easily attach multiple directives to a single element. A directive is a function with the following signature:

function directive(element: Element, accessor: () => any): void

Directive functions are called at render time but before being added to the DOM. You can do whatever you'd like in them including create signals, effects, register clean-up etc.

const [name, setName] = createSignal("")

function model(el, value) {
  const [field, setField] = value()
  createRenderEffect(() => (el.value = field()))
  el.addEventListener("input", (e) => setField(e.target.value))
};

<input type="text" use:model={[name, setName]} />

To register with TypeScript extend the JSX namespace.

declare module "solid-js" {
  namespace JSX {
    interface Directives {
      model: [() => any, (v: any) => any]
    }
  }
}

Limitations

Directives only work with native HTML elements (HTML/SVG/MathML/Custom Elements). Directives are not forwarded and won't work in user defined components, such as <MyComponent use:myinput={[..]}/> see also

Report an issue with this page