I know what is Ref in this official doc. The challenge I have is I didn't find any official document for innerRef. Is it still in use?
I learned about innerRef from here:
<ReferenceBox innerRef={ref}>
<a
href="https://github.com/FezVrasta/react-popper"
target="_blank"
>
react-popper
</a>
</ReferenceBox>
If somebody could point me what is innerRef, it would be good enough. Thanks!
innerRef is not a standard React property. It is a property of the React Popper module and is documented here.
It is a
Function that can be used to obtain popper reference
Clarification:
innerRef is just another attribute on the custom component (Arrow, for example) in react-popper.
This pattern is becoming a little common in cases where we want to access the dom element created by a child component. It could as well be named childRef or any other meaningful name (caution: ref or childRef won't work if the library you are using refers to this with a particular name such as innerRef).
Why innerRef?
What it does is, it points to a function in the parent component. The function takes a domNode/React instance as argument and stores it as parent component's instance property so that the parent can use the stored dom to access properties (width, offsetHeight, scrollTop, children, event listeners on the dom etc) of child node.
Your case:
Looking at the Arrow component, we can see that the innerRef is actually the setArrowNode function of Popper class which takes the arrow node as argument and sets it as an instance attribute on Popper. And the Arrow component seems to be kind of styled component which refers to ref prop of React as innerRef (new version of styled-components uses ref attribute). Which means, the react-popper will not work as expected if you pass the arrowProps.ref to anything else other than innerRef prop of Arrow.
innerRef is just a custom property that the authors chose to use. It has no special meaning within React. Looking at the source, it seems like they wanted a way to distinguish from the React ref prop, not sure why.