use-resize-observer - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

CHANGELOG.md

 # CHANGELOG
 
+## 2.0.0
+
+- [BREAKING] Returning a tuple and creating a ref object automatically
+- Using resize-observer-polyfill instead of resize-observer
+- Fixed an issue where resize observer would trigger changes endlessly
+- Added tests using Karma
+
 ## 1.0.0
 
 - Initial release

dist/bundle.cjs.js

 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
 var react = require('react');
-var resizeObserver = require('resize-observer');
+var ResizeObserver = _interopDefault(require('resize-observer-polyfill'));
 
@@ -44,4 +46,5 @@ function _slicedToArray(arr, i) {
 
-if (!window.ResizeObserver) resizeObserver.install();
-function index (ref) {
+function index () {
+  var ref = react.useRef();
+
   var _useState = react.useState(1),
@@ -59,3 +62,3 @@ _useState2 = _slicedToArray(_useState, 2),
     var element = ref.current;
-    var resizeObserver$$1 = new ResizeObserver(function (entries) {
+    var resizeObserver = new ResizeObserver(function (entries) {
       if (!Array.isArray(entries)) {
@@ -75,13 +78,10 @@ return;
     });
-    resizeObserver$$1.observe(element);
+    resizeObserver.observe(element);
     return function () {
-      return resizeObserver$$1.unobserve(element);
+      return resizeObserver.unobserve(element);
     };
-  });
-  return {
-    width: width,
-    height: height
-  };
+  }, []);
+  return [ref, width, height];
 }
 
 module.exports = index;

dist/bundle.esm.js

@@ -1,3 +0,3 @@
-import { useEffect, useState } from 'react';
-import { install } from 'resize-observer';
+import { useEffect, useState, useRef } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
 
@@ -42,4 +42,5 @@ function _slicedToArray(arr, i) {
 
-if (!window.ResizeObserver) install();
-function index (ref) {
+function index () {
+  var ref = useRef();
+
   var _useState = useState(1),
@@ -76,9 +77,6 @@ _useState2 = _slicedToArray(_useState, 2),
     };
-  });
-  return {
-    width: width,
-    height: height
-  };
+  }, []);
+  return [ref, width, height];
 }
 
 export default index;

package.json

 {
   "name": "use-resize-observer",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "main": "dist/bundle.cjs.js",
@@ -12,2 +12,4 @@ "module": "dist/bundle.esm.js",
     "build": "rollup -c",
+    "test": "karma start",
+    "test:build": "parcel build tests/index.js --out-dir tests/dist",
     "prepublish": "yarn build"
@@ -27,7 +29,7 @@ },
   "dependencies": {
-    "resize-observer": "^1.0.0-alpha.1"
+    "resize-observer-polyfill": "^1.5.0"
   },
   "peerDependencies": {
-    "react": "^16.7.0-alpha.0",
-    "react-dom": "^16.7.0-alpha.0"
+    "react": "16.7.0-alpha.2",
+    "react-dom": "16.7.0-alpha.2"
   },
@@ -37,8 +39,20 @@ "devDependencies": {
     "@babel/preset-env": "^7.1.0",
+    "babel-regenerator-runtime": "^6.5.0",
+    "delay": "^4.1.0",
     "husky": "^1.1.2",
+    "karma": "^3.1.3",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-jasmine": "^2.0.1",
+    "karma-spec-reporter": "^0.0.32",
     "lint-staged": "^7.3.0",
+    "parcel-bundler": "^1.10.3",
     "prettier": "^1.14.3",
+    "react": "16.7.0-alpha.2",
+    "react-dom": "16.7.0-alpha.2",
     "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

README.md

@@ -5,15 +5,17 @@ # use-resize-observer
 
+[![npm version](https://badge.fury.io/js/%40zeecoder%2Fuse-resize-observer.svg)](https://npmjs.com/package/@zeecoder/use-resize-observer)
+[![build](https://travis-ci.org/ZeeCoder/use-resize-observer.svg?branch=master)](https://travis-ci.org/ZeeCoder/use-resize-observer)
+
 ## Usage
 
-```
-import React, { useRef } from "react";
+```js
+import React from "react";
 import useResizeObserver from "use-resize-observer";
 
 const App = () => {
-  const ref = useRef();
-  const { width, height } = useResizeObserver(ref);
+  const [ref, width, height] = useResizeObserver();
 
   return (
     <div ref={ref}>
-        Size: {width}x{height}
+      Size: {width}x{height}
     </div>
@@ -23,1 +25,5 @@ );
 ```
+
+## License
+
+MIT

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7234

increased by15.56%

Number of lines in readme file

28

increased by27.27%

Worsened metrics

Dev dependency count

16

increased by128.57%

Number of package files

6

decreased by-14.29%

Lines of code

132

decreased by-3.65%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedresize-observer-polyfill@^1.5.0

• + Addedreact@16.7.0-alpha.2(transitive)

• + Addedreact-dom@16.7.0-alpha.2(transitive)

• + Addedresize-observer-polyfill@1.5.1(transitive)

• + Addedscheduler@0.12.0(transitive)

• - Removedresize-observer@^1.0.0-alpha.1

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedresize-observer@1.0.4(transitive)

• - Removedscheduler@0.19.1(transitive)