initial

Author: ZeeCoder

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/env"]]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.idea
+yarn.lock
+yarn-error.log
+dist

.npmignore

@@ -0,0 +1,4 @@
+src
+.babelrc
+rollup.config.js
+.editorconfig

CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 1.0.0
+
+- Initial release

LICENSE

@@ -0,0 +1,19 @@
+The MIT License (MIT)
+
+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

@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+import ResizeObserver from "resize-observer-polyfill";
+import WeakMap from "es6-weak-map";
+
+const registry = new WeakMap();
+
+const resizeObserver = new ResizeObserver(entries => {
+entries.forEach(entry => {
+const instance = registry.get(entry.target);
+if (!instance) {
+return;
+}
+
+    instance.handleResize(entry.contentRect);
+
+});
+});
+
+export default class ResizeObserverComponent extends Component {
+constructor(props) {
+super(props);
+
+    this.state = { size: null };
+
+    this.lastRegisteredElement = null;
+
+}
+
+componentDidMount() {
+const element = ReactDOM.findDOMNode(this);
+
+    if (element) {
+      registry.set(element, this);
+      resizeObserver.observe(element);
+      this.lastRegisteredElement = element;
+    }
+
+}
+
+handleResize(size) {
+this.setState({ size });
+}
+
+componentWillUnmount() {
+if (this.lastRegisteredElement) {
+registry.delete(this.lastRegisteredElement);
+resizeObserver.unobserve(this.lastRegisteredElement);
+}
+}
+
+componentDidUpdate() {
+const element = ReactDOM.findDOMNode(this);
+if (this.lastRegisteredElement === element) {
+return;
+}
+
+    if (this.lastRegisteredElement !== null) {
+      registry.delete(this.lastRegisteredElement);
+      resizeObserver.unobserve(this.lastRegisteredElement);
+      this.lastRegisteredElement = null;
+    }
+
+    if (element) {
+      registry.set(element, this);
+      resizeObserver.observe(element);
+      this.lastRegisteredElement = element;
+    }
+
+}
+
+render() {
+if (this.props.children) {
+return this.props.children(this.state.size);
+}
+
+    return this.props.render(this.state.size);
+
+}
+}
+
+ResizeObserverComponent.defaultProps = {
+render: size => (
+<div>My size is: {size ? `${size.width}x${size.height}` : "?"}</div>
+)
+};
+
+ResizeObserverComponent.propTypes = {
+render: PropTypes.func,
+children: PropTypes.func
+};

browserslist

@@ -0,0 +1,3 @@
+last 1 version
+> 1%
+not dead

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@zeecoder/react-resize-observer",
+  "version": "1.0.0",
+  "main": "dist/bundle.cjs.js",
+  "module": "dist/bundle.esm.js",
+  "repository": "[email protected]:ZeeCoder/use-resize-observer.git",
+  "description": "A React component to use ResizeObserver.",
+  "author": "Viktor Hubert <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "build": "rollup -c",
+    "prepublish": "yarn build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "prop-types": "^15.6.2",
+    "resize-observer-polyfill": "^1.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "husky": "^1.1.2",
+    "lint-staged": "^7.3.0",
+    "prettier": "^1.14.3",
+    "rollup": "^0.66.6",
+    "rollup-plugin-babel": "^4.0.3"
+  }
+}

rollup.config.js

@@ -0,0 +1,17 @@
+import babel from "rollup-plugin-babel";
+
+export default {
+  input: "src/index.js",
+  output: [
+    {
+      file: "dist/bundle.cjs.js",
+      format: "cjs"
+    },
+    {
+      file: "dist/bundle.esm.js",
+      format: "esm"
+    }
+  ],
+  plugins: [babel()],
+  external: ["react", "resize-observer-polyfill", "react-dom", "prop-types"]
+};