react-smart-scroll - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

es/hooks/useComponentRect.js

@@ -9,16 +9,18 @@ import { useEffect, useState } from 'react';
     useEffect(function () {
-        var current = ref.current;
+        if (ref) {
+            var current = ref.current;
 
-        var onResize = function onResize() {
-            setRect(current.getBoundingClientRect());
-        };
-        if (current) {
-            window.addEventListener('resize', onResize);
-            setRect(current.getBoundingClientRect());
+            var onResize = function onResize() {
+                setRect(current.getBoundingClientRect());
+            };
+            if (current) {
+                window.addEventListener('resize', onResize);
+                setRect(current.getBoundingClientRect());
+            }
+            return function () {
+                return window.removeEventListener('resize', onResize);
+            };
         }
-        return function () {
-            return window.removeEventListener('resize', onResize);
-        };
     }, [ref]);
     return rect;
 });

lib/hooks/useComponentRect.js

@@ -13,14 +13,16 @@ 'use strict';
     (0, _react.useEffect)(function () {
-        var current = ref.current;
+        if (ref) {
+            var current = ref.current;
 
-        var onResize = function onResize() {
-            setRect(current.getBoundingClientRect());
-        };
-        if (current) {
-            window.addEventListener('resize', onResize);
-            setRect(current.getBoundingClientRect());
+            var onResize = function onResize() {
+                setRect(current.getBoundingClientRect());
+            };
+            if (current) {
+                window.addEventListener('resize', onResize);
+                setRect(current.getBoundingClientRect());
+            }
+            return function () {
+                return window.removeEventListener('resize', onResize);
+            };
         }
-        return function () {
-            return window.removeEventListener('resize', onResize);
-        };
     }, [ref]);
@@ -27,0 +29,0 @@ return rect;

package.json

 {
   "name": "react-smart-scroll",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Smart Scroll React Component for long lists",
@@ -47,23 +47,23 @@ "author": "Steven Sacks",
   "peerDependencies": {
-    "react": "16.x"
+    "react": "^16.12.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",
-    "eslint": "^6.5.1",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-config-react-app": "^5.0.2",
-    "eslint-plugin-flowtype": "^4.3.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-config-react-app": "^5.1.0",
+    "eslint-plugin-flowtype": "^4.5.3",
+    "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.1.2",
-    "husky": "^3.0.9",
-    "lint-staged": "^9.4.2",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "husky": "^4.0.3",
+    "lint-staged": "^9.5.0",
     "nwb": "0.23.x",
-    "prettier": "^1.18.2",
+    "prettier": "^1.19.1",
     "prop-types": "^15.7.2",
     "react": "^16.10.2",
-    "react-dom": "^16.10.2"
+    "react-dom": "^16.12.0"
   }
 }

README.md

@@ -7,4 +7,34 @@ # react-smart-scroll
 
-ReactSmartScroll is un-opinionated, with minimum configuration. It has automatic support for variable height rows, even if they change height at runtime due to resizing, expanding, etc.
+ReactSmartScroll is (mostly) un-opinionated, with minimum configuration. It has automatic support for variable height rows, even if they change height at runtime due to resizing, expanding, etc.
 
+### Installation
+```
+yarn add react-smart-scroll
+
+npm i -S react-smart-scroll
+```
+
+### Super Simple Sample:
+```javascript
+import ReactSmartScroll from 'react-smart-scroll';
+
+const data = [
+    {id: 1, text: 'Hello'},
+    {id: 2, text: 'World'},
+];
+
+const TestRow = ({data, rowRef}) => (
+    <div ref={rowRef}>
+        {data.text}
+    </div>
+);
+
+export default () => (
+    <ReactSmartScroll data={data} row={TestRow} />
+);
+```
+
+### Working Demo with variable height rows:
+https://codesandbox.io/s/react-smart-scroll-demo-3x1ym
+
 **This component uses React Hooks, so it requires React 16.8.x or above.**
@@ -11,0 +41,0 @@

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29843

increased by2.35%

Lines of code

541

increased by0.74%

Number of lines in readme file

120

increased by33.33%

Worsened metrics

Number of low supply chain risk alerts

9

increased by28.57%

No dependency changes