React decorator to receive dimensions props generated by ResizeObserver
npm install react-with-dimensionsReact decorator to receive dimensions props generated byResizeObserver.
``console`
npm install --save react-with-dimensions
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 as y)right
- : Returns the right coordinate value of the DOMRect (usually the same as x + width)bottom
- : Returns the bottom coordinate value of the DOMRect (usually the same as y + height)left
- : Returns the left coordinate value of the DOMRect (usually the same as x)
`js
import React, { Component } from 'react'
import withDimensions from 'react-with-dimensions'
//
// decorator
//
@withDimensions
class Box extends Component {
render() {
width: {this.props.dimensions.width}
height: {this.props.dimensions.height}
//
// function
//
class Box extends Component {
render() {
width: {this.props.dimensions.width}
height: {this.props.dimensions.height}
const BoxWithDimensions = withDimensions(Box)
``
---
caiogondim.com ·
GitHub @caiogondim ·
Twitter @caio_gondim