@codeleap/hooks 5.5.4 → 5.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/hooks",
-  "version": "5.5.4",
+  "version": "5.6.3",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,19 +9,19 @@
     "directory": "packages/hooks"
   },
   "devDependencies": {
-    "@codeleap/config": "5.5.4",
-    "@codeleap/types": "5.5.4",
-    "@codeleap/utils": "5.5.4",
-    "@codeleap/logger": "5.5.4",
+    "@codeleap/config": "5.6.3",
+    "@codeleap/types": "5.6.3",
+    "@codeleap/utils": "5.6.3",
+    "@codeleap/logger": "5.6.3",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {
     "build": "echo 'No build needed'"
   },
   "peerDependencies": {
-    "@codeleap/types": "5.5.4",
-    "@codeleap/utils": "5.5.4",
-    "@codeleap/logger": "5.5.4",
+    "@codeleap/types": "5.6.3",
+    "@codeleap/utils": "5.6.3",
+    "@codeleap/logger": "5.6.3",
     "axios": "^1.7.9",
     "typescript": "5.5.2",
     "react": "18.2.0",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/hooks",
-  "version": "5.5.4",
+  "version": "5.6.3",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/index.ts

@@ -31,7 +31,7 @@ export * from './useEffectOnce'
 export * from './useUnmount'
 export * from './useSearch'
 export * from './usePartialState'
-export * from './useIsClient'
+export * from './useIsMounted'
 export * from './useComponentTestId'
 export * from './useId'
 

package/src/useIsMounted.ts

@@ -0,0 +1,31 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+
+const isReactNativeOrServer = typeof navigator !== 'undefined'
+
+const useIsomorphicLayoutEffect =
+  isReactNativeOrServer ? useLayoutEffect : useEffect
+
+/**
+ * Hook to check if the component has mounted. SSR safe.
+ * @return true after the component's html is mounted in the browser.
+ */
+export function useIsMounted() {
+  const [mounted, setMounted] = useState(false)
+
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted
+}
+
+/**
+ * Hook to check if the code is running on the client-side.
+ * NOTE: This is just a mirror of `useIsMounted` for retrocompatibility reasons
+ * @return `isClient: true` after the component is mounted in the browser.
+ */
+export function useIsClient() {
+  return {
+    isClient: useIsMounted(),
+  }
+}

package/src/useIsClient.ts

@@ -1,17 +0,0 @@
-import { useEffect, useState } from 'react'
-
-/**
- * Hook to check if the code is running on the client-side.
- * @return `isClient: true` after the component is mounted in the browser.
- */
-export function useIsClient() {
-  const [isClient, setIsClient] = useState(false)
- 
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
-
-  return {
-    isClient
-  }
-}