Skip to main content
Version: 5.7.2



Easily grab dimensions of an element with a ref using this hook


npm install rooks

Importing the hook​

import { useDimensionsRef } from "rooks";


function Demo() {
const [ref, dimensions, node] = useDimensionsRef();

return (
<div className="App">
<h1>useDimensionsRef example</h1>
border: "2px solid black",
width: "200px",
height: "200px"
dimensions.height: {dimensions.height}px
dimensions.width: {dimensions.width}px

render(<Demo />);


ArgumentsTypeDescriptionDefault value
options{ updateOnScroll?: boolean, updateOnResize?: boolean }Whether to update dimension on window resize and scroll{ updateOnScroll = true, updateOnResize = true }

======= | Arguments | Type | Description | Default value | |-----------|-----------------------------------------------------------|---------------------------------------------------------|------------------------------------------------------| | options | { updateOnScroll?: boolean, updateOnResize?: boolean } | Whether to update dimension on window resize and scroll | { updateOnScroll = true, updateOnResize = true } |


Returns an array of 3 items:

Return itemTypeDescriptionDefault value
refCallback refA callback ref function to be used as a ref for the element that needs to be trackedundefined
dimensionsUseDimensionsRefReturnAn object with dimensions of the ref elementnull
nodeHTMLElementThe element being tracked by refnull

Codesandbox Examples​

Basic Usage​

Join Bhargav's discord server​

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.