React-with-dimensions NPM

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