Merge pull request #1 from atomic-state/enh-hooks-components

Enh hooks components

Author: danybeltran

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-kuh",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Some React kinda useful hooks and components",
   "main": "dist/index.js",
   "keywords": [],

src/components/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import React, { useState, useEffect } from "react"
+import React, { Suspense, useState, useEffect } from "react"
 
 let isServer: boolean
 
@@ -25,3 +25,38 @@ export function BrowserOnly({ children }: { children?: React.ReactNode }) {
 export function ClientOnly({ children }: { children: React.ReactNode }) {
   return children as JSX.Element
 }
+
+/**
+ * For Next.js pages router
+ */
+
+let isServer__layout = true
+
+function SSRSuspense({ fallback, children }: any) {
+  const [ssr, setSSR] = useState(isServer__layout)
+
+  useEffect(() => {
+    setSSR(false)
+    isServer__layout = false
+  }, [])
+
+  // This will render the fallback in the server
+  return ssr ? fallback : <Suspense fallback={fallback}>{children}</Suspense>
+}
+
+export default function WithLayout({
+  Component,
+  pageProps,
+  layoutProps,
+  loadingProps,
+}: any) {
+  const Layout = Component.Layout || (({ children }: any) => children)
+  const Loading = Component.Loading || (() => null)
+  return (
+    <Layout {...{ ...layoutProps, Component }}>
+      <SSRSuspense fallback={<Loading {...{ ...loadingProps, Component }} />}>
+        <Component {...pageProps} />
+      </SSRSuspense>
+    </Layout>
+  )
+}

src/hooks/index.ts

@@ -47,7 +47,7 @@ export function useWindowSize() {
 }
 
 export function useBoolean(initialValue: boolean | null = null as any) {
-  const [state, setState] = useState<boolean>(initialValue)
+  const [state, setState] = useState<boolean>(initialValue as boolean)
 
   const actions = {
     toggle() {
@@ -63,20 +63,11 @@ export function useBoolean(initialValue: boolean | null = null as any) {
       setState(v)
     },
     reset() {
-      setState(initialValue)
+      setState(initialValue as boolean)
     },
   }
 
-  const end = [state, actions] as [
-    boolean,
-    {
-      toggle(): void
-      off(): void
-      on(): void
-      set(v: boolean): void
-      reset(): void
-    }
-  ]
+  const end = [state, actions] as const
 
   return end
 }
@@ -85,6 +76,9 @@ export function useObject<T = any>(initialValue: T) {
   const [state, setState] = useState<T>(initialValue)
 
   const actions = {
+    /**
+     * @deprecated Use `setPartialValue` instead
+     */
     write(f: Partial<T> | ((e: T) => Partial<T>)) {
       const n = (
         typeof f === "function" ? (f as any)(state) : { ...state, ...f }
@@ -95,31 +89,45 @@ export function useObject<T = any>(initialValue: T) {
         ...n,
       }))
     },
+    /**
+     * @deprecated Use `setValue` instead
+     */
     replace(f: T | ((e: T) => T)) {
       const n = typeof f === "function" ? (f as any)(state) : f
       setState(n)
     },
 
+    setPartialValue(f: Partial<T> | ((e: T) => Partial<T>)) {
+      const n = (
+        typeof f === "function" ? (f as any)(state) : { ...state, ...f }
+      ) as T
+
+      setState((s) => ({
+        ...s,
+        ...n,
+      }))
+    },
+    setValue(f: T | ((e: T) => T)) {
+      const n = typeof f === "function" ? (f as any)(state) : f
+      setState(n)
+    },
     reset() {
       setState(initialValue)
     },
   }
 
-  const end = [state, actions] as [
-    T,
-    {
-      write(f: Partial<T> | ((e: T) => Partial<T>)): void
-      replace(f: T | ((e: T) => T)): void
-      /**
-       * Reset to initial value
-       */
-      reset(): void
-    }
-  ]
+  const end = [state, actions, setState] as const
 
   return end
 }
 
+function useE() {
+  const [state, actions] = useObject({
+    name: "dany",
+    email: "",
+  })
+}
+
 /**
  * Returns `true` after the component mounts/hydrates (after the first render)
  */

src/index.ts

@@ -1,3 +1,3 @@
 "use client"
 export { useBoolean, useObject, useSecondRender, useWindowSize } from "./hooks"
-export { BrowserOnly, ClientOnly } from "./components"
+export { BrowserOnly, ClientOnly, WithLayout } from "./components"