Skip to content

Latest commit

 

History

History
123 lines (89 loc) · 3.18 KB

README.md

File metadata and controls

123 lines (89 loc) · 3.18 KB

use-resize-observer

npm version npm bundle size (scoped)

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

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>
    );
};