Rect

A state container which provides an interface for retrieving the bounding
client rect of a referenced element. The bounding client rect will update
each time the window resizes - a behavior which can be turned off by setting
the prop recalcOnWindowResize to false. It doesn't provide values for x and
y, as IE, Edge and Safari don't have them as part of their DOMRect.

$3

``yarn add @render-props/rect` or `npm i @render-props/rect`



____

Usage

js
import Rect from '@render-props/rect'
function DivWithRect (props) {
  return (
    
      ({rectRef, recalcRect, top, right, bottom, left, width, height}) => (
        

          
            My width: {width}
          

          
            My height: {height}
          

          
            My position: {JSON.stringify({top, right, bottom, left})}
          

        

      )
    
  )
}


____
Props

-

recalcOnWindowResize {bool}: if true

, this component will update itself
each time a window resize event is detected. Defaults to

true

.
-

withCoords {bool}: if true

, this component will provide its child function
with unpacked arguments for its bounding client rect, i.e.

{top, right, bottom, left, width, height}. If false

, it will provide a
function

getRect

 instead which will return the same object just mentioned.
Defaults to

true

.
Render Props

#### Ref -rectRef (element) - Thisrefmust be provided to whatever element you are trying to receive the bounding client rect for. e.g.

#### Methods -recalcRect- remeasures the element bound torectRef-getRect- only present ifwithCoords is set to false. Returns the bounding client rect object.

#### State Note: these are only provided ifwithCoords is true.

- top {number}: the top coordinate value of the DOMRect-right {number}: the right coordinate value of the DOMRect-bottom {number}: the bottom coordinate value of the DOMRect-left {number}: the left coordinate value of the DOMRect-width {number}: the width of the DOMRect-height {number}: the height of the DOMRect`