How to bind custom method or property with component's ref?

[Sioxas]

I want to customize the ref of the component.
In React we can use useImperativeHandle to customizes the instance value that is exposed to parent components.
How to achieve the same feature in Solid?

[ryansolid]

Oh sure. We don't have a hook for it. All you need to do is call props.ref as a function. The only caveat is it may not exist, which could be hidden behind a hook of sorts I suppose but you can also just check that it exists.

Converting the example from the linked docs I think it's just this?

function FancyInput(props) {
  const inputRef = (el) => {
    props.ref?.({
      focus() { el.focus(); }
    })
  }
  return <input ref={inputRef} ... />;
}

[dolsem]

Nice! How would I type ref in TypeScript in this case?

[teddybee]

I have a form (Felte library) which I would like to reset. How can I do with this ref thing with typescript? The html form, I guess, don't even know about the const {reset} = createForm(...) variable.

My from component:

interface Props {  
  ref?: Ref<Element>;
}

export const LoginForm: Component<Props> = (props) => {
 const { form, reset,} = createForm()

 const inputRef = (el) => {
    props.ref?.({
      formReset() { reset(); }
    })
  }
  
  return 
    <form ref={inputRef}>
      ...
    </form>
}

Typescript error for ref:
This expression is not callable.
Not all constituents of type 'Ref' are callable.
Type 'Element' has no call signatures.ts(2349)

P.S.: I figured it out, this solved the type check issue (or make a custom type for the functions that you can call from the parent):

interface Props {
  ref?: Ref<any>;
}

[rburgst]

for anyone interested, you dont really need a ref at all.
https://playground.solidjs.com/anonymous/1009fe24-ae27-4efb-add2-b9e7430e502f

if you dont need access to the HtmlElement of the <input> in the above example it is enough to just call the props.ref() method.

function ExposesMethod(props: Props) {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count() + 1);

    props.ref?.({
      increment() { increment(); }
    })

    return (
      <>
        <button type="button" onClick={increment}>
          Method {count()}
        </button>
      </>
      );
  }

[andrewgreenh]

This is the typescript solution that works with strongly typed refs:

https://playground.solidjs.com/anonymous/ebc2d78f-dec1-46c8-8e5d-6283984247b4

function ChartContainer() {
  let chartRef: ChartRef;
  return (
    <>
      <button onClick={() => chartRef.resetZoom()}>Reset Zoom</button>
      <Chart ref={chartRef!} />
    </>
  );
}



type ChartRef = {
  resetZoom: () => void;
};

function Chart(props: { ref: ChartRef }) {
  let divRef: HTMLDivElement;

  createRefContent(
    () => props.ref,
    () => ({
      resetZoom: () => (divRef.style.fontSize = "1rem"),
    }),
  );

  return (
    <div
      ref={divRef!}
      onClick={(e) => {
        e.currentTarget.style.fontSize =
          "" +
          (parseFloat(e.currentTarget.style.fontSize || "1rem") + 0.1) +
          "rem";
      }}
    >
      I am a chart. Really
    </div>
  );
}

function createRefContent<T extends Exclude<unknown, Function>>(
  getRef: () => Ref<T>,
  createRef: () => T,
) {
  createRenderEffect(() => {
    const refProp = getRef();
    if (typeof refProp !== "function") {
      throw new Error(
        "Should never happen, as solid always passes refs as functions",
      );
    }

    let refFunc = refProp as (value: T) => void;

    refFunc(createRef());
  });
}