UI & Layout
useDimensionsRef
About
Easily grab dimensions of an element with a ref using this hook
Examples
import { useDimensionsRef }from "rooks";export default function App() { const [ref,dimensions,node]= useDimensionsRef(); return ( <div className="App"> <h1>useDimensionsRef example</h1> <div ref={ref} style={{ border:"2px solid black", width:"200px", height:"200px", }} > dimensions.height: {dimensions?.height}px <br /> dimensions.width: {dimensions?.width}px </div> </div> );}Arguments
| Arguments | Type | Description | Default value |
|---|---|---|---|
| options | { updateOnScroll?: boolean, updateOnResize?: boolean } | Whether to update dimension on window resize and scroll | { updateOnScroll = true, updateOnResize = true } |
Returns
Returns an array of 3 items:
| Return item | Type | Description | Default value |
|---|---|---|---|
| ref | Callback ref | A callback ref function to be used as a ref for the element that needs to be tracked | undefined |
| dimensions | UseDimensionsRefReturn | An object with dimensions of the ref element | null |
| node | HTMLElement | The element being tracked by ref | null |