@geee-be/react-utils 1.1.5 → 1.1.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @geee-be/react-utils
 
+## 1.1.7
+
+### Patch Changes
+
+- 3ca7ee9: feat: add ClientOnly component for client-side rendering
+
+## 1.1.6
+
+### Patch Changes
+
+- 8011d1e: Add Collapsible, DropdownMenu, Separator, Sheet, Sidebar from shadcn
+
 ## 1.1.5
 
 ### Patch Changes

package/dist/helpers/client-only.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useIsClient } from '../hooks';
+export const ClientOnly = ({ children, serverFallback }) => {
+    const isClient = useIsClient();
+    if (isClient)
+        return _jsx(_Fragment, { children: serverFallback });
+    return _jsx(_Fragment, { children: children });
+};

package/dist/helpers/index.js

@@ -1,2 +1,3 @@
+export { ClientOnly } from './client-only.js';
 export * from './ripple.js';
 export * from './sub-component.js';

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './use-broadcast-channel.js';
 export * from './use-history-state.js';
 export * from './use-is-client.js';
+export * from './use-is-mobile.js';
 export * from './use-local-state.js';

package/dist/hooks/use-is-mobile.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!isMobile;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geee-be/react-utils",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "",
   "keywords": [],
   "license": "MIT",

package/src/helpers/client-only.tsx

@@ -0,0 +1,12 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { useIsClient } from '../hooks';
+
+interface Props extends PropsWithChildren {
+  serverFallback?: ReactNode;
+}
+
+export const ClientOnly: FC<Props> = ({ children, serverFallback }) => {
+  const isClient = useIsClient();
+  if (isClient) return <>{serverFallback}</>;
+  return <>{children}</>;
+};

package/src/helpers/index.ts

@@ -1,2 +1,3 @@
+export { ClientOnly } from './client-only.js';
 export * from './ripple.js';
 export * from './sub-component.js';

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './use-broadcast-channel.js';
 export * from './use-history-state.js';
 export * from './use-is-client.js';
+export * from './use-is-mobile.js';
 export * from './use-local-state.js';

package/src/hooks/use-is-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}