@geee-be/react-utils 1.1.8 → 1.1.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @geee-be/react-utils
 
+## 1.1.10
+
+### Patch Changes
+
+- 3ad787e: feat: add Monitor
+
+## 1.1.9
+
+### Patch Changes
+
+- 48e0d4e: fix negated logic in ClientOnly
+
 ## 1.1.8
 
 ### Patch Changes

package/dist/helpers/client-only.js

@@ -3,7 +3,7 @@ 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)
+    if (!isClient)
         return _jsx(_Fragment, { children: serverFallback });
     return _jsx(_Fragment, { children: children });
 };

package/dist/helpers/index.js

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

package/dist/helpers/monitor.js

@@ -0,0 +1,13 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useRenderCount } from '@uidotdev/usehooks';
+import { useEffect } from 'react';
+export const Monitor = ({ children, label }) => {
+    useEffect(() => {
+        console.log(label, 'mounted');
+        return () => console.log(label, 'unmounted');
+    }, [label]);
+    const count = useRenderCount();
+    console.log(label, 'rendered', count);
+    return _jsx(_Fragment, { children: children });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geee-be/react-utils",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -28,6 +28,9 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
+  "dependencies": {
+    "@uidotdev/usehooks": "^2.4.1"
+  },
   "scripts": {
     "prebuild": "rimraf dist/*",
     "build": "tsc",

package/src/helpers/client-only.tsx

@@ -9,6 +9,6 @@ interface Props extends PropsWithChildren {
 
 export const ClientOnly: FC<Props> = ({ children, serverFallback }) => {
   const isClient = useIsClient();
-  if (isClient) return <>{serverFallback}</>;
+  if (!isClient) return <>{serverFallback}</>;
   return <>{children}</>;
 };

package/src/helpers/index.ts

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

package/src/helpers/monitor.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useRenderCount } from '@uidotdev/usehooks';
+import { useEffect, type FC, type PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<{ label: string }>;
+
+export const Monitor: FC<Props> = ({ children, label }) => {
+  useEffect(() => {
+    console.log(label, 'mounted');
+    return () => console.log(label, 'unmounted');
+  }, [label]);
+
+  const count = useRenderCount();
+  console.log(label, 'rendered', count);
+
+  return <>{children}</>;
+};