JSX attributes

use:*

Removed in Solid 2.0

The use:* directive syntax has been removed in Solid 2.0. Directives are now implemented as ref directive factories and are passed through the ref attribute. This provides a more composable and explicit pattern.

Migration

In Solid 1.x, directives used the use:directiveName syntax. In Solid 2.0, create a directive factory function that returns a ref callback, and pass it via ref.

Basic directive

// Solid 1.x
function tooltip(el: HTMLElement, accessor: Accessor<string>) {
  const text = accessor();
  // ... attach tooltip to el
}

<div use:tooltip={"Hello"} />

// Solid 2.0
function tooltip(text: string) {
  return (el: HTMLElement) => {
    // ... attach tooltip to el
  };
}

<div ref={tooltip("Hello")} />

Two-way data binding example

// Solid 1.x
function model(el: HTMLInputElement, accessor: Accessor<Signal<string>>) {
  const [field, setField] = accessor();
  createRenderEffect(() => (el.value = field()));
  el.addEventListener("input", ({ target }) => setField(target.value));
}

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

// Solid 2.0
function model(signal: Signal<string>) {
  const [field, setField] = signal;
  // Phase 1: Owned setup — create reactive primitives here
  createEffect(
    () => field(),
    (value) => {
      // Phase 2: Apply — el is captured in closure from the ref callback
      if (el) el.value = value;
    }
  );
  let el: HTMLInputElement;
  return (element: HTMLInputElement) => {
    el = element;
    el.value = field();
    el.addEventListener("input", ({ target }) => setField((target as HTMLInputElement).value));
  };
}

<input type="text" ref={model([name, setName])} />

Composing multiple directives

In Solid 2.0, you can compose multiple ref directives using an array:

<div ref={[tooltip("Hello"), draggable({ axis: "x" })]} />

See the ref documentation for more details on ref directive factories and composition.

Migration summary

Solid 1.x	Solid 2.0
`use:directiveName={value}`	`ref={directiveName(value)}`
`use:a={va} use:b={vb}`	`ref={[a(va), b(vb)]}`
Directive signature: `(el, accessor) => void`	Factory signature: `(opts) => (el) => void`
Required `false && directive` to avoid tree-shaking	No longer needed (ref values are always used)

Report an issue with this page