react-with-dimensions
v1.1.0
Published
React decorator to receive dimensions props generated by ResizeObserver
Downloads
32,803
Readme
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
)
import React, { Component } from 'react'
import withDimensions from 'react-with-dimensions'
//
// decorator
//
@withDimensions
class Box extends Component {
render() {
<div>
<p>width: {this.props.dimensions.width}</p>
<p>height: {this.props.dimensions.height}</p>
</div>
}
}
//
// function
//
class Box extends Component {
render() {
<div>
<p>width: {this.props.dimensions.width}</p>
<p>height: {this.props.dimensions.height}</p>
</div>
}
}
const BoxWithDimensions = withDimensions(Box)
caiogondim.com · GitHub @caiogondim · Twitter @caio_gondim