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
.
Installation
yarn add @render-props/rect
or npm i @render-props/rect
Usage
import Rect from '@render-props/rect'
function DivWithRect (props) {
return (
<Rect>
({rectRef, recalcRect, top, right, bottom, left, width, height}) => (
<div ref={rectRef}>
<div>
My width: {width}
</div>
<div>
My height: {height}
</div>
<div>
My position: {JSON.stringify({top, right, bottom, left})}
</div>
</div>
)
</Rect>
)
}
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
)
- This
ref
must be provided to whatever element you are trying to receive the
bounding client rect for. e.g. <div ref={rectRef}>
Methods
recalcRect
- remeasures the element bound to
rectRef
getRect
- only present if
withCoords
is set to false
. Returns the bounding client
rect object.
State
Note: these are only provided if withCoords
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