useMeasures

Description

I'd like to introduce quite commonly used in other libraries of that type functionality of gathering target element relative measurement properties. It is similar to useSize , but it differs in the source of truth and returns more target element properties.

• useSize uses target and returns clientHeight and clientWidth only
• useMeasures uses contentRect and returns all described below properties

API

// from src/utils/domTarget.ts
type BasicTarget<T extends TargetType = Element> =
  | (() => TargetValue<T>)
  | TargetValue<T>
  | MutableRefObject<TargetValue<T>>;

interface UseMeasuresRes {
    readonly top: number;
    readonly right: number;
    readonly bottom: number;
    readonly left: number;
    readonly x: number;
    readonly y: number;
    readonly height: number;
    readonly width: number;
}

type UseMeasures = (target: BasicTarget) => UseMeasuresRes

DEMO

export default () => {
  const ref = useRef(null); // we can either use Element instead of ref e.g. document.querySelector('body')
  const { height, width, top, left, x, y, right, bottom } = useMeasures(ref);
  return (
    <div ref={ref}>
      <p>Try to scroll or resize the preview window </p>
      <p>x: {x}</p>
      <p>y: {y}</p>
      <p>top: {top}</p>
      <p>right: {right}</p>
      <p>bottom: {bottom}</p>
      <p>left: {left}</p>
      <p>width: {width}</p>
      <p>height: {height}</p>
</div>
  );
};

Related PRs

I've already opened a PR with this functionality:
#1874

Detailed spec

Params

Result