react-with-dimensions
React decorator to receive dimensions props generated by
ResizeObserver
.
Installation
npm install --save react-with-dimensions
Usage
Decorated component will receive an addicional dimensions
prop with all keys
defined in DOMRectReadOnly.
x
: The x coordinate of the DOMRect's originy
: The y coordinate of the DOMRect's originwidth
: The width of the DOMRectheight
: The height of the DOMRecttop
: Returns the top coordinate value of the DOMRect (usually the same asy
)right
: Returns the right coordinate value of the DOMRect (usually the same asx
+width
)bottom
: Returns the bottom coordinate value of the DOMRect (usually the same asy
+height
)left
: Returns the left coordinate value of the DOMRect (usually the same asx
)
//// decorator// @withDimensions { <div> <p>width: thispropsdimensionswidth</p> <p>height: thispropsdimensionsheight</p> </div> } //// function// { <div> <p>width: thispropsdimensionswidth</p> <p>height: thispropsdimensionsheight</p> </div> } const BoxWithDimensions =
caiogondim.com · GitHub @caiogondim · Twitter @caio_gondim