Package Exports

react-resize-detector

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-resize-detector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React resize detector

Your feedback is highly appreciated!

Please, file an issue if something went wrong or let me know via Twitter @maslianok

Event-based Element Resize Detection

This implementation does NOT use an internal timer to detect size changes (as most implementations do). It uses scroll events. Inspired by this article Cross-Browser, Event-based, Element Resize Detection written by Back Alley Coder

Demo

Live demo

Local demo:

git clone https://github.com/maslianok/react-resize-detector.git
cd react-resize-detector/example
npm install && npm start

Installation

npm i react-resize-detector --save

Example

import React, {Component} from 'react';
import {render} from 'react-dom';
import ReactResizeDetector from 'react-resize-detector';

class App extends Component {
  render() {
    return (
      <div>
        ...
        <ReactResizeDetector handleWidth handleHeight onResize={this._onResize.bind(this)} />
      </div>
    );
  }

  _onResize() {
    ...
  }
}

render(<App />, document.getElementById('root'));

API

handleWidth

(Bool) Trigger onResize on width change

handleHeight

(Bool) Trigger onResize on height change

onResize

(Func) Function that will be invoked with width and height arguments. When handling only one of dimensions, other argument will be undefined.

License

MIT