This package contains useNodeOffsets
hook that accepts a React ref as parameter.
It returns the { offsetWidth, offsetHeight }
of the ref even it exists within an invisible tree of elements (default browser behavior : { offsetWidth: 0, offsetHeight: 0,}
)
This was first used to retrieve the offsetWidth of the input label of @material-ui's an outlined variants when it's first rendered in an invisible tree. More info on this issue.
Simple usage with outlined variants of material ui components:
; const inputLabel = React; const labelOffsets = ; return <div className="App"> <div style= display: "none" > <TextField variant="outlined" value=value label="Input label with issue OK" onChange=onChange InputProps= labelWidth: labelOffsetsoffsetWidth InputLabelProps= ref: inputLabel /> </div> </div> ;
Try it on this sandbox.