What is 'ref' for in components?

Hi, I’d like to understand the role of “ref” in your components.
ref: HTMLElementRefOf<"div"> ,
root={{ref}} and

const Section = React.forwardRef(Section_);

I’ll add another question to that:

I’m looking for a way to get the height of a component.
I’ve tried using this ref to get it and creating my own ref, but with no avail.

Part of the challenge is also, that I need the height of the entire component.

If you take a look at these arrows to the left and right, they are it’s own component attached to a free root. And my goal is to get the height of the root and then set the height of the Arrow component to match it, so that the arrows are always centered.

But given, that the root element is set as a “free box” it’s height is always fixed

If I’d set the Section component to be a vertical layout, then the arrow component can’t be part of it. Then I would have to position an independent Arrow component in the Section components parent to match the position and the height of the Section component.

Hmm, you can still have the root be a vertical layout, and just let the arrow component be “freely positioned”, like this:

aah I didn’t know one could select free positioning within auto layout. Glad I don’t have this restriction anymore.

@chungwu I’m still eager to get dimensions of a component.
Which I had been ale to do in another application with




But I’m not able to get any ref to work.
I’m always getting type errors like

Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.

Not sure what type to give my ref so I don’t get undefined

And still not sure how and why there is a ref prop

ref: HTMLElementRefOf<"div">

which is always null

hmm how are you using it? You should be able to do something like…

const sectionRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
  if (sectionRef.current) {
return (
  <Section ref={sectionRef} />

I had to set so that I can use the ref prop inside the Section component. That fixed it.

I also had to make sure to put the ref into the deps of a useLayoutEffect that gives me the dimensions

@still_peacock Did you set this in the Plasmic editor, or in code?