use-resize-observer

!npm bundle size (scoped)

React hook implementation of ResizeObserver to measure the size of an element.

- Features
- Installation
- Usage
- useResizeObserver
- useDebounceResizeObserver
- 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

$3

This hook has no input parameters.

$3

`tsx
import React from 'react';
import { useResizeObserver } from '@pbr1111/use-resize-observer';

const App = () => {
const { ref, width, height } = useResizeObserver();

return (


| Parameter | Required | Description |
| --------- | -------- | --------------------------- |
| delayMs | Yes | Delay time in milliseconds. |

$3

`tsx
import React from 'react';
import { useDebounceResizeObserver } from '@pbr1111/use-resize-observer';

const App = () => {
const { ref, width, height } = useDebounceResizeObserver(
500
);

return (


| Parameter | Required | Description |
| --------- | -------- | --------------------------- |
| delayMs | Yes | Delay time in milliseconds. |

$3

`tsx
import React from 'react';
import { useThrottleResizeObserver } from '@pbr1111/use-resize-observer';

const App = () => {
const { ref, width, height } = useThrottleResizeObserver(
500
);

return (