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

enh(WithLayout):

README.md

@@ -29,15 +29,15 @@ Usage
 import { useBoolean } from 'react-kuh'
 
 function App(){
-  const [active, setActive] = useBoolean(false) // if not present, default is null
+  const [active, actions] = useBoolean(false) // if not present, default is null
 
   return (
     <div>
-      <button onClick={setActive.on}>Active</button>
-      <button onClick={setActive.off}>Inactive</button>
-      <button onClick={setActive.off}>Inactive</button>
-      <button onClick={() => setActive.set(false)}>Set</button>
-      <button onClick={setActive.reset}>Reset</button>
+      <button onClick={actions.on}>Active</button>
+      <button onClick={actions.off}>Inactive</button>
+      <button onClick={actions.off}>Inactive</button>
+      <button onClick={() => actions.set(false)}>Set</button>
+      <button onClick={actions.reset}>Reset</button>
     </div>
   )
 }
@@ -57,13 +57,13 @@ type NoteType = {
 
 function App() {
   // Type is not required if it should be inferred from the default value
-  const [note, setNote] = useObject<NoteType>({
+  const [note, actions] = useObject<NoteType>({
     title: '',
     content: ''
   })
 
   function randomizeNote() {
-    setNote.replace({
+    actions.setValue({
       title: Math.random().toString(12).split('.')[1],
       content: Math.random().toString(12).split('.')[1]
     })
@@ -74,20 +74,20 @@ function App() {
       <input
         value={note.title}
         onChange={e => {
-          setNote.write({
+          actions.setPartialValue({
             title: e.target.value
           })
         }}
       />
       <input
         value={note.content}
         onChange={e => {
-          setNote.write({
+          actions.setPartialValue({
             content: e.target.value
           })
         }}
       />
-      <button onClick={setNote.reset}>Reset to initial value</button>
+      <button onClick={actions.reset}>Reset to initial value</button>
       <button onClick={randomizeNote}>Random</button>
     </div>
   )
@@ -107,7 +107,7 @@ This component renders its children after the first render. This can be used as
 Usage
 
 ```jsx
-import { BrowserOnly } = from 'react-kuh'
+import { BrowserOnly } from 'react-kuh'
 
 export default function Page(){
   return (
@@ -119,26 +119,4 @@ export default function Page(){
     </div>
   )
 }
-```
-
-#### `ClientOnly` (component)
-
-This component renders its children as they are passed to it, this component has the `use client` directive at the top so it can be used in Next.js's server components to wrap client-only components as well as server components.
-
-Usage
-
-```jsx
-import { ClientOnly } = from 'react-kuh'
-
-export default function Page(){
-  return (
-    <div>
-      <SomeServerComponent/>
-      <BrowserOnly>
-        <AnotherServerComponent/>
-        <SomeClientComponent/>
-      </BrowserOnly>
-    </div>
-  )
-}
 ```

package.json

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

src/components/index.tsx

@@ -44,19 +44,36 @@ function SSRSuspense({ fallback, children }: any) {
   return ssr ? fallback : <Suspense fallback={fallback}>{children}</Suspense>
 }
 
-export default function WithLayout({
+export function WithLayout<L>({
   Component,
   pageProps,
   layoutProps,
   loadingProps,
-}: any) {
-  const Layout = Component.Layout || (({ children }: any) => children)
-  const Loading = Component.Loading || (() => null)
+  defaultLayout = ({ children }: any) => children,
+  defaultLoading = () => null,
+  showLayout = true,
+  showLoading = true,
+}: {
+  Component?: any
+  pageProps?: any
+  layoutProps?: any
+  loadingProps?: any
+  defaultLayout?: any
+  defaultLoading?: any
+  showLayout?: boolean
+  showLoading?: boolean
+}) {
+  const Layout = Component.Layout || defaultLayout
+  const Loading = Component.Loading || defaultLoading
+
+  const SLayout = showLayout ? Layout : ({ children }: any) => children
+  const SLoading = showLoading ? Loading : () => null
+
   return (
-    <Layout {...{ ...layoutProps, Component }}>
-      <SSRSuspense fallback={<Loading {...{ ...loadingProps, Component }} />}>
+    <SLayout {...{ ...layoutProps, Component }}>
+      <SSRSuspense fallback={<SLoading {...{ ...loadingProps, Component }} />}>
         <Component {...pageProps} />
       </SSRSuspense>
-    </Layout>
+    </SLayout>
   )
 }

src/hooks/index.ts

@@ -59,9 +59,15 @@ export function useBoolean(initialValue: boolean | null = null as any) {
     on() {
       setState(true)
     },
+    /**
+     * @deprecated Use `setValue` instead
+     */
     set(v: boolean) {
       setState(v)
     },
+    setValue(v: boolean) {
+      setState(v)
+    },
     reset() {
       setState(initialValue as boolean)
     },
@@ -121,13 +127,6 @@ export function useObject<T = any>(initialValue: T) {
   return end
 }
 
-function useE() {
-  const [state, actions] = useObject({
-    name: "dany",
-    email: "",
-  })
-}
-
 /**
  * Returns `true` after the component mounts/hydrates (after the first render)
  */