react-with-dimensions

React decorator to receive dimensions props generated by
ResizeObserver.

Installation

``console npm install --save react-with-dimensions`

`Usage`

Decorated component will receive an addicional dimensionsprop with all keys defined in DOMRectReadOnly.

- x: The x coordinate of the DOMRect's origin -y: The y coordinate of the DOMRect's origin -width: The width of the DOMRect -height: The height of the DOMRect -top: 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