@jameswomack/react-resize-detector

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 i && npm start

Installation

npm i react-resize-detector

Running the tests

npm t

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} />
      </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