Gathering detailed insights and metrics for use-element-dimensions
Gathering detailed insights and metrics for use-element-dimensions
Gathering detailed insights and metrics for use-element-dimensions
Gathering detailed insights and metrics for use-element-dimensions
@heroui/use-measure
Hook that measure and track a element dimensions
@nextui-org/use-measure
Hook that measure and track a element dimensions
@v0xoss/use-measure
Hook that measure and track a element dimensions
@nextui-org/use-real-shape
Hook that returns the real dimensions of an element
React Hook to figure out DOM Element dimensions with updates
npm install use-element-dimensions
Typescript
Module System
Node Version
NPM Version
71.7
Supply Chain
93
Quality
75.1
Maintenance
100
Vulnerability
100
License
TypeScript (44.13%)
JavaScript (43.05%)
HTML (10.07%)
CSS (2.76%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
6 Stars
52 Commits
2 Forks
46 Branches
2 Contributors
Updated on Feb 06, 2025
Latest Version
2.1.3
Package Id
use-element-dimensions@2.1.3
Unpacked Size
15.88 kB
Size
4.78 kB
File Count
10
NPM Version
6.13.7
Node Version
13.10.1
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
use-element-dimensions
React Hook to figure out DOM Element dimensions with updates
1import useDimensions from "use-element-dimensions"; 2 3const Example = () => { 4 const [{ width, height }, ref] = useDimensions(); 5 return ( 6 <div ref={ref}> 7 The width of this div is: {width} and the height is: {height} 8 </div> 9 ); 10};
The first item in the tuple returned by the hook includes all properties of the latest ResizeObserverEntry
for the specific element.
borderBoxSize
An object containing the new border box size of the observed element when the callback is run.
contentBoxSize
An object containing the new content box size of the observed element when the callback is run.
contentRect
A DOMRectReadOnly object containing the new size of the observed element when the callback is run. Note that this is better supported than the above two properties, but it is left over from an earlier implementation of the Resize Observer API, is still included in the spec for web compat reasons, and may be deprecated in future versions.
target
A reference to the Element or SVGElement being observed.
The DOMRect
returned by target.getBoundingClientRect
also lends its properties to this value.
x
The x coordinate of the DOMRect's origin.
y
The y coordinate of the DOMRect's origin.
width
The width of the DOMRect.
height
The height of the DOMRect.
top
Returns the top coordinate value of the DOMRect (has the same value as y, or y + height if height is negative.)
right
Returns the right coordinate value of the DOMRect (has the same value as x + width, or x if width is negative.)
bottom
Returns the bottom coordinate value of the DOMRect (has the same value as y + height, or y if height is negative.)
left
Returns the left coordinate value of the DOMRect (has the same value as x, or x + width if width is negative.)
There are already some hook libraries that provide dimensions on first render or even update them on window
resize event, however in many cases this may not be sufficient. HTML DOM Elements can resize in response to a lot of things we don't expect, only one of which is screen size, for example:
resize
triggers in this case - or it should).Everything in this package is in src/index.ts
. If you want to run an example to develop against, install parcel
globally and then run parcel example/simple/index.html
from the root directory of the project.
Run yarn build
to build for the three targets specified.
Integration tests use Cypress, because it is hard to do unit tests for hooks and viewport resizing.
The examples live in the example
directory. To run any of them, make sure devDependencies
are installed and run yarn parcel example/<name>/index.html
.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 0/15 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
65 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More