react-div-100vh - npm Package Compare versions

Comparing version 0.5.6 to 0.6.0

dist/cjs/index.js

		@@ -47,7 +47,7 @@ "use strict";
		var warned = false;
		function Div100vh(_a) {
		var _b = _a.style, style = _b === void 0 ? {} : _b, other = __rest(_a, ["style"]);
		var Div100vh = react_1.forwardRef(function (_a, ref) {
		var style = _a.style, other = __rest(_a, ["style"]);
		var height = use100vh();
		// TODO: warn only in development
		if (!warned && style.height) {
		if (!warned && (style === null \|\| style === void 0 ? void 0 : style.height)) {
		warned = true;
		@@ -57,4 +57,5 @@ console.warn('<ReactDiv100vh /> overrides the height property of the style prop');
		var styleWithRealHeight = __assign(__assign({}, style), { height: height ? height + "px" : '100vh' });
		return react_1["default"].createElement("div", __assign({ style: styleWithRealHeight }, other));
		}
		return react_1["default"].createElement("div", __assign({ ref: ref, style: styleWithRealHeight }, other));
		});
		Div100vh.displayName = 'Div100vh';
		exports["default"] = Div100vh;
		@@ -61,0 +62,0 @@ function use100vh() {

dist/esm/index.js

		@@ -23,9 +23,9 @@ var __assign = (this && this.__assign) \|\| function () {
		};
		import React, { useState, useEffect } from 'react';
		import React, { forwardRef, useState, useEffect } from 'react';
		var warned = false;
		export default function Div100vh(_a) {
		var _b = _a.style, style = _b === void 0 ? {} : _b, other = __rest(_a, ["style"]);
		var Div100vh = forwardRef(function (_a, ref) {
		var style = _a.style, other = __rest(_a, ["style"]);
		var height = use100vh();
		// TODO: warn only in development
		if (!warned && style.height) {
		if (!warned && (style === null \|\| style === void 0 ? void 0 : style.height)) {
		warned = true;
		@@ -35,4 +35,6 @@ console.warn('<ReactDiv100vh /> overrides the height property of the style prop');
		var styleWithRealHeight = __assign(__assign({}, style), { height: height ? height + "px" : '100vh' });
		return React.createElement("div", __assign({ style: styleWithRealHeight }, other));
		}
		return React.createElement("div", __assign({ ref: ref, style: styleWithRealHeight }, other));
		});
		Div100vh.displayName = 'Div100vh';
		export default Div100vh;
		export function use100vh() {
		@@ -39,0 +41,0 @@ var _a = useState(measureHeight), height = _a[0], setHeight = _a[1];

dist/index.d.ts

		@@ -1,4 +0,5 @@
		import { HTMLAttributes } from 'react';
		export default function Div100vh({ style, ...other }: HTMLAttributes<HTMLDivElement>): JSX.Element;
		import React from 'react';
		declare const Div100vh: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
		export default Div100vh;
		export declare function use100vh(): number \| null;
		export declare function measureHeight(): number \| null;

package.json

		{
		"name": "react-div-100vh",
		"version": "0.5.6",
		"version": "0.6.0",
		"description": "A workaround for the '100vh' issue in mobile browsers",
		@@ -16,2 +16,3 @@ "license": "MIT",
		"build": "yarn cleanup && yarn concurrently --kill-others-on-fail 'yarn:build:*'",
		"release": "standard-version",
		"prepublishOnly": "yarn build"
		@@ -36,2 +37,3 @@ },
		"react-dom": "16.13.1",
		"standard-version": "^9.0.0",
		"ts-jest": "^26",
		@@ -47,3 +49,8 @@ "ts-node": "^9",
		"directory": "packages/react-div-100vh"
		},
		"standard-version": {
		"skip": {
		"changelog": true
		}
		}
		}

README.md

		@@ -62,5 +62,5 @@ # `Div100vh` React component and `use100vh` React hook

		Under the hood `use100vh` uses `getRealHeight` function which is exported as
		Under the hood `use100vh` uses `measureHeight` function which is exported as
		well, so feel free to use it, even without React. Currently it returns
		`document.documentElement?.clientHeight \|\| window.innerHeight`.
		`document.documentElement?.clientHeight \|\| window.innerHeight` or `null`.

		@@ -67,0 +67,0 @@ ## Testing

New alerts