@uxf/core-react 11.60.1 → 11.66.0

package/README.md

@@ -1,11 +1,50 @@
 # UXF Core-React
 
-## String helpers
+## Components
+---
 
+### Hide
+
+Conditionally hide some jsx content.
 ```tsx
-import { nl2br } from "@uxf/core-react/string/nl2br";
+const { Hide } from "@uxf/core-react/components/hide";
 
-<div>{nl2br("Hello\nWorld")}</div>
+<Hide when={SOME_CONDITION}>
+    ...some content
+</Hide>
+```
+
+### Show
+
+Conditionally show some jsx content.
+```tsx
+const { Show } from "@uxf/core-react/components/show";
+
+<Show when={SOME_CONDITION}>
+    ...some content
+</Show>
+```
+
+### ViewportHeightPolyfill
+
+Polyfill for custom css variable `--viewport-height` to mimic functionality of browser's [dynamic viewport height](https://web.dev/blog/viewport-units).
+
+Add component to react app root (eg. `_app.tsx`).
+```tsx
+const { ViewportHeightPolyfill } from "@uxf/core-react/components/viewport-height-polyfill";
+
+<ViewportHeightPolyfill />
+```
+
+Add css variable declaration with fallback to app global styles (eg. `base.css`) if already not there.
+```css
+:root {
+    --viewport-height: 100vh;
+
+    @supports (height: 100dvh) {
+        --viewport-height: 100dvh;
+    }
+}
 ```
 
 ## Hooks
@@ -338,3 +377,20 @@ import { useDebounce } from "@uxf/core-react/hooks/use-debounce";
 
 const debouncedValue = useDebounce<string>("some value", 300);
 ```
+
+## String helpers
+
+```tsx
+import { nl2br } from "@uxf/core-react/string/nl2br";
+
+<div>{nl2br("Hello\nWorld")}</div>
+```
+---
+### useMediaQuery
+Returns if the media query is matched.
+```tsx
+import { useMediaQuery } from "@uxf/core-react/hooks/use-media-query";
+import { twScreens } from "@generated/tw-tokens/tw-screens";
+
+const isDesktop = useMediaQuery(`(min-width: ${twScreens.sm})`);
+```

package/components/viewport-height-polyfill.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare function ViewportHeightPolyfill(): ReactNode;

package/components/viewport-height-polyfill.js

@@ -0,0 +1,49 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportHeightPolyfill = ViewportHeightPolyfill;
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const with_unit_1 = require("@uxf/styles/units/with-unit");
+const react_1 = __importStar(require("react"));
+function ViewportHeightPolyfill() {
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    const [viewportHeight, setViewportHeight] = (0, react_1.useState)();
+    (0, use_on_mount_1.useOnMount)(() => {
+        if (!CSS.supports("height: 100dvh")) {
+            return;
+        }
+        const updateViewportHeight = () => setViewportHeight(window.innerHeight);
+        updateViewportHeight();
+        window.addEventListener("resize", updateViewportHeight);
+        return () => window.removeEventListener("resize", updateViewportHeight);
+    });
+    if (isMounted && (0, is_not_nil_1.isNotNil)(viewportHeight)) {
+        return react_1.default.createElement("style", null, `:root { --viewport-height: ${(0, with_unit_1.withUnit)(viewportHeight, "px")}; }`);
+    }
+    return null;
+}

package/hooks/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(mediaQueryString: string): boolean;

package/hooks/use-media-query.js

@@ -0,0 +1,18 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaQuery = useMediaQuery;
+const react_1 = require("react");
+function useMediaQuery(mediaQueryString) {
+    const [isMatched, setIsMatched] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const observer = new ResizeObserver(() => {
+            setIsMatched(window.matchMedia(mediaQueryString).matches);
+        });
+        observer.observe(document.body);
+        return () => {
+            observer.unobserve(document.body);
+        };
+    }, [mediaQueryString]);
+    return isMatched;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core-react",
-    "version": "11.60.1",
+    "version": "11.66.0",
     "description": "UXF Core",
     "author": "UX Fans s.r.o",
     "license": "MIT",