What is 'ref' for in components?

Developer Support
1

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

const Section = React.forwardRef(Section_);
2

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.

image.png
image.png1892×564 113 KB

image.png
image.png902×290 23.7 KB

3

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

4

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.

5

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

image.png
image.png1366×431 59.1 KB

6

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

7

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

.current?.getBoundingClientRect().width

or

.current?.clientWidth

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

8

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) {
    sectionRef.current.clientWidth 
  }
});
return (
  <Section ref={sectionRef} />
);
9

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

10

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

11

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