Merge pull request #26 from maslianok/resizeobserver

Implement ReactObserver

.eslintrc

@@ -3,15 +3,11 @@
   "extends": "airbnb",
   "env": {
     "browser": true,
-    "mocha": true,
     "node": true,
     "es6": true
   },
   "rules": {
-    "max-len": [
-      2,
-      120
-    ],
+    "max-len": [2, 120],
     "react/jsx-filename-extension": 0
   },
   "settings": {

.gitignore

@@ -1,5 +1,4 @@
 node_modules
 */**/dist
 *.log
-.DS_Store
-lib
+.DS_Store

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Denis Rul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,65 +1,74 @@
-# React resize detector
+# Handle element resizes like it's 2018!
 
-### Your feedback is highly appreciated! 
+Nowadays browsers start supporting element resize handling natively using [ResizeObserver](https://wicg.github.io/ResizeObserver/). And we use this feature (with [polyfill](resize-observer-polyfill)) to help you handle element resizes in React.
 
-Please, file an issue if something went wrong or let me know via Twitter @maslianok
+#### ⚠️ This change intriduced in v.2.0.0
 
----
-
-## 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](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) written by [Back Alley Coder](http://www.backalleycoder.com/)
+For older implementations please checkout this branch [v.1.1.0](https://github.com/maslianok/react-resize-detector/tree/4fef26243ae4b3aeb386cca8bd829d3299a4a494)
 
 ## Demo
+
 #### [Live demo](http://maslianok.github.io/react-resize-detector/)
 
 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`
+```
+npm i react-resize-detector
+// OR
+yarn add react-resize-detector
+```
 
 ## Example
+
 ```javascript
-import React, {Component} from 'react';
-import {render} from 'react-dom';
+import React, { PureComponent } from 'react';
+import { render } from 'react-dom';
 import ReactResizeDetector from 'react-resize-detector';
 
-class App extends Component {
+class App extends PureComponent {
   render() {
     return (
       <div>
         ...
-        <ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
+        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
       </div>
     );
   }
 
-  _onResize = () => {
+  onResize = () => {
     ...
   }
 }
 
 render(<App />, document.getElementById('root'));
-
 ```
 
 ## API
+
+#### onResize
+
+(Func) Function that will be invoked with `width` and `height` arguments.
+
 #### handleWidth
-(Bool) Trigger `onResize` on width change
+
+(Bool) Trigger `onResize` on width change. Default: `false`.
 
 #### 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`.
+(Bool) Trigger `onResize` on height change. Default: `false`.
+
+#### skipOnMount
+
+(Bool) Do not trigger onResize when a component mounts. Default: `false`.
 
 ## License
+
 MIT

examples/package.json

@@ -1,20 +1,19 @@
 {
   "name": "examples",
-  "version": "1.0.0-beta.0",
+  "version": "1.1.0",
   "private": true,
   "devDependencies": {
-    "linklocal": "^2.6.1",
-    "react-scripts": "^1.0.13"
+    "linklocal": "^2.8.1",
+    "react-scripts": "^1.1.1"
   },
   "dependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-resize-detector": "file:../"
   },
   "scripts": {
     "start": "linklocal && react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
 }

examples/src/App.js

@@ -9,7 +9,6 @@ const s = {
   leftColumn: {
     flexBasis: '200px',
     backgroundColor: '#EAEAEA',
-
   },
   rightColumn: {
     display: 'flex',
@@ -36,11 +35,18 @@ class App extends Component {
     count: 0,
   };
 
-  onResize = () =>
-    this.setState({ count: this.state.count + 1 });
+  componentDidMount() {
+    setTimeout(() => {
+      console.log('CHANGE!');
+      this.setState({
+        handleWidth: true,
+      });
+    }, 10000);
+  }
+
+  onResize = () => this.setState({ count: this.state.count + 1 });
 
-  hideLeftPanel = () =>
-    this.setState({ leftPanel: !this.state.leftPanel });
+  hideLeftPanel = () => this.setState({ leftPanel: !this.state.leftPanel });
 
   render() {
     return (
@@ -54,9 +60,8 @@ class App extends Component {
 
           <div style={s.text}>Main div resized {this.state.count} times</div>
 
-          <ResizeDetector handleWidth handleHeight onResize={this.onResize} />
+          <ResizeDetector handleWidth={this.state.handleWidth} skipOnMount onResize={this.onResize} />
         </div>
-
       </div>
     );
   }