https://github.com/pbr1111/use-resize-observer
React hook implementation of ResizeObserver to measure the size of an element.
https://github.com/pbr1111/use-resize-observer
hooks react resize-observer
Last synced: 2 months ago
JSON representation
React hook implementation of ResizeObserver to measure the size of an element.
- Host: GitHub
- URL: https://github.com/pbr1111/use-resize-observer
- Owner: pbr1111
- Created: 2020-07-29T16:41:44.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-14T11:48:44.000Z (over 2 years ago)
- Last Synced: 2025-11-23T12:11:03.650Z (7 months ago)
- Topics: hooks, react, resize-observer
- Language: TypeScript
- Homepage:
- Size: 1.05 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-resize-observer
[](https://badge.fury.io/js/%40pbr1111%2Fuse-resize-observer)
React hook implementation of ResizeObserver to measure the size of an element.
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [useResizeObserver](#useResizeObserver)
- [useDebounceResizeObserver](#useDebounceResizeObserver)
- [useThrottleResizeObserver](#useThrottleResizeObserver)
# Features
- Uses RefCallback to react to nodes that change their reference (like conditional nodes).
- Provides useDebounceResizeObserver and useThrottleResizeObserver hooks for an optimized debouncing and throttling exprience, avoiding unnecessary rerenders.
- Written in TypeScript. The declaration files (.d.ts) are included in the package.
# Installation
With yarn:
```sh
yarn add @pbr1111/use-resize-observer
```
With npm:
```sh
npm install @pbr1111/use-resize-observer
```
# Usage
All hooks return the same object:
| Property | Description |
| -------- | --------------------------------------------------------------------------------- |
| `ref` | RefCallback `ref` to be observed |
| `width` | Element width. It will be undefined until the size of the element is calculated. |
| `height` | Element height. It will be undefined until the size of the element is calculated. |
## useResizeObserver
### Parameters
This hook has no input parameters.
### Example
```tsx
import React from 'react';
import { useResizeObserver } from '@pbr1111/use-resize-observer';
const App = () => {
const { ref, width, height } = useResizeObserver();
return (
Width: {width}px
Height: {height}px
);
};
```
## useDebounceResizeObserver
### Parameters
| Parameter | Required | Description |
| --------- | -------- | --------------------------- |
| `delayMs` | Yes | Delay time in milliseconds. |
### Example
```tsx
import React from 'react';
import { useDebounceResizeObserver } from '@pbr1111/use-resize-observer';
const App = () => {
const { ref, width, height } = useDebounceResizeObserver(
500
);
return (
Width: {width}px
Height: {height}px
);
};
```
## useThrottleResizeObserver
### Parameters
| Parameter | Required | Description |
| --------- | -------- | --------------------------- |
| `delayMs` | Yes | Delay time in milliseconds. |
### Example
```tsx
import React from 'react';
import { useThrottleResizeObserver } from '@pbr1111/use-resize-observer';
const App = () => {
const { ref, width, height } = useThrottleResizeObserver(
500
);
return (
Width: {width}px
Height: {height}px
);
};
```