@wbe/use-bounding-client-rect v2.7.1

@wbe/use-bounding-client-rect

This React hook allow to get dynamically getBoundClientRect of any React Ref.

Installation

$ npm install -s @wbe/use-bounding-client-rect

How to use

Basic usage:

// ...
import { useBoundingClientRect } from "@wbe/use-window-size";

const App = () => {
  // get ref
  const rootRef = useRef();
  // get ref properties
  const refRect = useBoundingClientRect(rootRef);

  return (
    <div ref={rootRef}>
      {refRect.x}, {refRect.y} ...
    </div>
  );
};

Parameters

pListener options are:

• ON_INIT: listen rect only on init
• ON_SCROLL: listen rect on init + scroll
• ON_RESIZE: listen rect on init + resize
• ON_SCROLL_AND_RESIZE: listen rect on init + scroll + resize

Returned

The hook return an object (ClientRect interface):

{
  "x": number,
  "y": number,
  "width": number,
  "height": number,
  "top": number,
  "right": number,
  "bottom": number,
  "left": number
}