mirror of
https://github.com/streamich/react-use.git
synced 2025-12-08 18:02:14 +00:00
8de2a3ee13
chore: move all the tests to the separate directory outside of sources; chore: remove jest.config.js (config moved to the package.json); test: unused import in test; test: 💍 fix tests add back x and y to useMeasure chore: 🤖 add linter to /tests folder ci: 🎡 limit Jest worker count for CircleCI
31 lines
674 B
Markdown
31 lines
674 B
Markdown
# `useMeasure`
|
|
|
|
React sensor hook that tracks dimensions of an HTML element using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
|
|
|
|
## Usage
|
|
|
|
```jsx
|
|
import { useMeasure } from "react-use";
|
|
|
|
const Demo = () => {
|
|
const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure();
|
|
|
|
return (
|
|
<div ref={ref}>
|
|
<div>x: {x}</div>
|
|
<div>y: {y}</div>
|
|
<div>width: {width}</div>
|
|
<div>height: {height}</div>
|
|
<div>top: {top}</div>
|
|
<div>right: {right}</div>
|
|
<div>bottom: {bottom}</div>
|
|
<div>left: {left}</div>
|
|
</div>
|
|
);
|
|
};
|
|
```
|
|
|
|
## Related hooks
|
|
|
|
- [useSize](./useSize.md)
|