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

1import React, {Component} from 'react';
2import {render} from 'react-dom';
3import ReactResizeDetector from 'react-resize-detector';
4
5class App extends Component {
6  render() {
7    return (
8      <div>
9        ...
10        <ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
11      </div>
12    );
13  }
14
15  _onResize = () => {
16    ...
17  }
18}
19
20render(<App />, document.getElementById('root'));
21

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