How to define reference for a component?
How can I define
ref for a custom component with TypeScript?14 Replies
Either use
createSignal<HTMLElement>() or let ref: HTMLElement and use an exclamation mark in the ref={ref!} property.How do I forward the
ref to a custom component?
refs are usually only for intrinsic elements. Otherwise, all you get is a prop to define yourself, so you'd type that as Setter<HTMLElement>.
Can you provide an example?
But what's the use case?
I have a
textarea element, I am creating a reference to it and passing it to a custom component to set the value of it dynamically
Why not use an Accessor<string> to update the value using solid's reactive system?
Is that documented?
<textarea value={value()} /> should do the trick. Just use setValue() to overwrite the current value. It will only be overwritten if setValue is called, so the reactive updates won't clash with user input.setValue is to be passed to the
Note component though?Yes.
Or if you want to use a store, you can do that, too.
Also, one last question, what are the differences between stores and signals?
Signals are there for simple value literals. They are used by stores under the hood, which are for objects and arrays.
So if you have deep data, use a store, and put flat data into signals.
👍 thanks!