react-invisible-element
v0.1.4
Published
Downloads
3
Readme
###This package will continue in react-offsets
This package contains useInvisibleRefWidth
hook that accepts a React ref as parameter.
This is used to retrieve the offsetWidth of a ref when it's first rendered in an invisible tree of elements.
The need of this hook came when I encourted this issue in my projects.
Simple usage with outlined variants of material ui components:
const inputLabel = React.useRef();
const labelWidth = useInvisibleRefWidth(inputLabel);
return (
<div className="App">
<div style={{ display: "none" }}>
<TextField
variant="outlined"
value={value}
label="Input label with issue OK"
onChange={onChange}
InputProps={{
labelWidth
}}
InputLabelProps={{
ref: inputLabel
}}
/>
</div>
</div>
);
Try it on this sandbox.