Docs
useMeasureAny

Measure the dimensions of any element with useMeasureAny, providing options to track changes and observe the element.

Loading...

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-measure-any

Usage

"use client"
 
import { useMeasureAny } from "@/hooks/use-measure-any"
 
export function Component() {
  const { MeasureComponent } = useMeasureAny({
    borderRadius: 0,
    actionPosition: "top-right",
    measurementPosition: "top-right",
  })
 
  return (
    <div>
      <p>Press and hold to measure distances</p>
      <MeasureComponent />
    </div>
  )
}

API Reference

Parameters

NameTypeDescriptionDefault ValueOptional
borderRadiusnumberThe radius of the border corners.0.5Yes
borderWidthnumberThe width of the border.1Yes
actionPosition"top-left" | "top-right" | "bottom-left" | "bottom-right"The position of the action button."top-right"Yes
measurementPosition"top-left" | "top-right" | "bottom-left" | "bottom-right"The position where the measurement is displayed."bottom-left"Yes
startMeasurebooleanWhether to start measuring immediately.falseYes
refReact.RefObject<HTMLDivElement | null>A ref to the element that will be measured.-Yes

Return Values

NameTypeDescription
measurementsObjectAn object containing the measured dimensions (e.g., width, height).
MeasureComponentReact.ComponentA React component that can be used to render the measurement UI.
reset() => voidA function to reset the measurement points.