Skip to main content
Version: 5.7.3

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.

Last updated on by imbhargav5