Introduction

• useMeasure tracks an element and make sure you get measures of it.
• You can track any element easily

const {
    left,
    top,
    width,
    bottom,
    right,
    x,
    y,
    height,
    offsetLeft,
    offsetTop,
} = useMeasure({ ref })

Getting Started

• You need to import useMeasure.

From Collection

import { useMeasure } from "@reactivers/hooks";

From Package

import { useMeasure } from "@reactivers/use-measure";

Interfaces

Props

interface UseMeasureProps {

	//ref object for observe
    ref: React.MutableRefObject<any>;

	//If set true, will update on window resize
    updateOnWindowResize?: boolean; // Default = false

	//If passed, the hook doesn't return measures, calls only this function
    onResize?: (measure: Measure) => void;
}

Returns

interface Measure {
    left: number;
    top: number;
    width: number;
    bottom: number;
    right: number;
    x: number;
    y: number;
    height: number;
    offsetLeft: number;
    offsetTop: number;
}

Example

Run Example