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 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)

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