dry-ux 1.50.0 → 1.51.0

package/dist/index.d.ts

@@ -13,3 +13,4 @@ export { ErrorBoundary } from "./error/ErrorBoundary";
 export { ErrorScreen } from "./error/ErrorScreen";
 export { Loader } from "./ui-utils/Loader";
 export { Spinner } from "./ui-utils/Spinner";
+export { RenderWhenVisible } from "./ui-utils/RenderWhenVisible";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
+exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
 var UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
 Object.defineProperty(exports, "useDryUxContext", { enumerable: true, get: function () { return UIUtilProvider_1.useUIUtilContext; } });
 Object.defineProperty(exports, "DryUXContext", { enumerable: true, get: function () { return UIUtilProvider_1.UIUtilContext; } });
@@ -42,3 +42,5 @@ var Loader_1 = require("./ui-utils/Loader");
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return Loader_1.Loader; } });
 var Spinner_1 = require("./ui-utils/Spinner");
 Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
+var RenderWhenVisible_1 = require("./ui-utils/RenderWhenVisible");
+Object.defineProperty(exports, "RenderWhenVisible", { enumerable: true, get: function () { return RenderWhenVisible_1.RenderWhenVisible; } });

package/dist/ui-utils/RenderWhenVisible.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export declare const RenderWhenVisible: React.FC<{
+    content: string | JSX.Element;
+}>;

package/dist/ui-utils/RenderWhenVisible.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderWhenVisible = void 0;
+const React = require("react");
+const utilities_1 = require("../helpers/utilities");
+exports.RenderWhenVisible = React.memo(({ content }) => {
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const ref = React.useRef(null);
+    const isVisible = (0, utilities_1.useIsVisible)(ref);
+    React.useEffect(() => {
+        if (!isLoaded && isVisible) {
+            setIsLoaded(true);
+        }
+    }, [isVisible]);
+    return React.createElement("div", { ref: ref }, isLoaded && content);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.50.0",
+  "version": "1.51.0",
   "description": "",
   "main": "dist/index",
   "scripts": {