react-div-100vh - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1-beta.1

CHANGELOG.md

 ## 0.5.0 (Aug 27, 2020)
+
 - [BREAKING CHANGE] `use100vh` returns `null` in Node (when server-side rendered)(@mvasin)
@@ -3,0 +4,0 @@ - test: switch to Jest (@mvasin)

dist-lib/index.d.ts

 import { HTMLAttributes } from 'react';
 export default function Div100vh({ style, ...other }: HTMLAttributes<HTMLDivElement>): JSX.Element;
 export declare function use100vh(): number | null;
-export declare function getRealHeight(): number | null;
+export declare function measureHeight(): number | null;

dist-lib/index.js

@@ -44,3 +44,3 @@ "use strict";
 exports.__esModule = true;
-exports.getRealHeight = exports.use100vh = void 0;
+exports.measureHeight = exports.use100vh = void 0;
 var react_1 = __importStar(require("react"));
@@ -55,21 +55,38 @@ function Div100vh(_a) {
 function use100vh() {
-    var _a = react_1.useState(getRealHeight()), height = _a[0], setHeight = _a[1];
-    function setRealHeight() {
-        var realHeight = getRealHeight();
-        if (height !== realHeight)
-            setHeight(realHeight);
-    }
+    var _a = react_1.useState(null), height = _a[0], setHeight = _a[1];
+    var wasRenderedOnClientAtLeastOnce = useWasRenderedOnClientAtLeastOnce();
     react_1.useEffect(function () {
-        window.addEventListener('resize', setRealHeight);
-        return function () { return window.removeEventListener('resize', setRealHeight); };
-    }, [setRealHeight, height]);
+        function setMeasuredHeight() {
+            var measuredHeight = measureHeight();
+            if (wasRenderedOnClientAtLeastOnce && height !== measuredHeight)
+                setHeight(measuredHeight);
+        }
+        window.addEventListener('resize', setMeasuredHeight);
+        return function () { return window.removeEventListener('resize', setMeasuredHeight); };
+    }, [height, wasRenderedOnClientAtLeastOnce]);
     return height;
 }
 exports.use100vh = use100vh;
-function getRealHeight() {
+function measureHeight() {
     var _a;
-    if (typeof window === 'undefined')
+    if (!isClient())
         return null;
     return ((_a = document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || window.innerHeight;
 }
-exports.getRealHeight = getRealHeight;
+exports.measureHeight = measureHeight;
+// Once we ended up on client, the first render must look the same as on
+// the server so hydration happens without problems. _Then_ we immediately
+// schedule a subsequent update and return the height measured on the client.
+// It's not needed for CSR-only apps, but is critical for SSR.
+function useWasRenderedOnClientAtLeastOnce() {
+    var _a = react_1.useState(false), wasRenderedOnClientAtLeastOnce = _a[0], setWasRenderedOnClientAtLeastOnce = _a[1];
+    react_1.useEffect(function () {
+        if (isClient() && !wasRenderedOnClientAtLeastOnce) {
+            setWasRenderedOnClientAtLeastOnce(true);
+        }
+    }, [wasRenderedOnClientAtLeastOnce]);
+    return wasRenderedOnClientAtLeastOnce;
+}
+function isClient() {
+    return typeof window !== 'undefined';
+}

package.json

 {
   "name": "react-div-100vh",
-  "version": "0.5.0",
+  "version": "0.5.1-beta.1",
   "description": "A workaround for the '100vh' issue in mobile browsers",
@@ -9,3 +9,3 @@ "license": "MIT",
   "scripts": {
-    "test": "jest",
+    "test": "jest --config .jestrc.json",
     "lint": "eslint lib",
@@ -12,0 +12,0 @@ "prettier:check": "prettier --check .",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11924

increased by8.6%

Lines of code

94

increased by22.08%

No dependency changes