Skip to main content
Version: 5.7.2

useDimensionsRef

About​

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

Installation​

npm install rooks

Importing the hook​

import { useDimensionsRef } from "rooks";

Usage​

function Demo() {
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
dimensions.width: {dimensions.width}px
</div>
</div>
);
}

render(<Demo />);

Arguments​

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​

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.