initial

.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,4 @@
+node_modules
+.idea
+yarn.lock
+dist

.npmignore

@@ -0,0 +1,8 @@
+src
+.idea
+yarn.lock
+yarn-error.log
+.DS_Store
+.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,21 @@
+# use-resize-observer
+
+A React hook to use a Resize Observer.
+
+## Usage
+
+```
+import React, { useRef } from "react";
+import useResizeObserver from "use-resize-observer";
+
+const App = () => {
+  const ref = useRef();
+  const { width, height } = useResizeObserver(ref);
+
+  return (
+    <div ref={ref}>
+        Size: {width}x{height}
+    </div>
+  );
+};
+```

browserslist

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

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "use-resize-observer",
+  "version": "1.0.0",
+  "main": "dist/bundle.cjs.js",
+  "module": "dist/bundle.esm.js",
+  "repository": "git@github.com:ZeeCoder/use-resize-observer.git",
+  "description": "A React hook to use a Resize Observer",
+  "author": "Viktor Hubert <rpgmorpheus@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "rollup -c",
+    "prepublish": "yarn build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "resize-observer": "^1.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.7.0-alpha.0",
+    "react-dom": "^16.7.0-alpha.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"]
+};

src/index.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { install } from "resize-observer";
+
+if (!window.ResizeObserver) install();
+
+export default function(ref) {
+  const [width, changeWidth] = useState(1);
+  const [height, changeHeight] = useState(1);
+
+  useEffect(() => {
+    const element = ref.current;
+    const resizeObserver = new ResizeObserver(entries => {
+      if (!Array.isArray(entries)) {
+        return;
+      }
+
+      // Since we only observe the one element, we don't need to loop over the
+      // array
+      if (!entries.length) {
+        return;
+      }
+
+      const entry = entries[0];
+
+      changeWidth(entry.contentRect.width);
+      changeHeight(entry.contentRect.height);
+    });
+
+    resizeObserver.observe(element);
+
+    return () => resizeObserver.unobserve(element);
+  });
+
+  return { width, height };
+}