@pbr1111/use-resize-observer

use-resize-observer

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:

yarn add @pbr1111/use-resize-observer

With npm:

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

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

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

    return (
        <div ref={ref}>
            <div>Width: {width}px</div>
            <div>Height: {height}px</div>
        </div>
    );
};

useDebounceResizeObserver

Parameters

Parameter	Required	Description
delayMs	Yes	Delay time in milliseconds.

Example

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

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

    return (
        <div ref={ref}>
            <div>Width: {width}px</div>
            <div>Height: {height}px</div>
        </div>
    );
};

useThrottleResizeObserver

Parameters

Parameter	Required	Description
delayMs	Yes	Delay time in milliseconds.

Example

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

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

    return (
        <div ref={ref}>
            <div>Width: {width}px</div>
            <div>Height: {height}px</div>
        </div>
    );
};