react-with-dimensions

React decorator to receive dimensions props generated by ResizeObserver

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-with-dimensions
1.1.06 years ago6 years agoMinified + gzip package size for react-with-dimensions in KB

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 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 @caiogondim