Next Perpendicular Moonlanding
    Wondering what’s next for npm?Check out our public roadmap! »

    @pbr1111/use-resize-observer
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

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

    Install

    npm i @pbr1111/use-resize-observer

    DownloadsWeekly Downloads

    35

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    47.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar