feat: add useClient hook (#99)

A hook that determine whether the code is running on the client-side.

.changeset/seven-meals-visit.md

@@ -0,0 +1,5 @@
+---
+'@raddix/use-client': major
+---
+
+Added the useClient hook

docs/_config.json

@@ -74,6 +74,10 @@
       "title": "Lifecycle",
       "heading": true,
       "children": [
+        {
+          "title": "useClient",
+          "path": "/hooks/use-client"
+        },
         {
           "title": "useTimeout",
           "path": "/hooks/use-timeout"

docs/en/use-client.mdx

@@ -0,0 +1,46 @@
+---
+title: useClient
+description: Determine whether the code is running on the client-side.
+---
+
+## Installation
+
+Install the custom hook from your command line.
+
+<Snippet pkg text='@raddix/use-client' />
+
+## Usage
+
+```tsx
+import { useClient } from '@raddix/use-client'
+
+export default function App() {
+  const isClient = useClient()
+
+  return(
+    <div>
+      <h6>Is Client? </h6>
+      <p>{isClient ? "Yes" : "No"}</p>
+    </div>
+  )
+}
+```
+
+## API
+
+### Returns
+
+<ApiTable
+  head={{
+    name: 'Name',
+    description: 'Descripción',
+    type: 'Tipo'
+  }}
+  data={[
+    {
+      name: 'isClient',
+      description: 'true if running in a client-side environment, false otherwise.',
+      type: 'boolean'
+    }
+  ]}
+/>

docs/en/use-debounce.mdx

@@ -13,11 +13,11 @@ Install the custom hook from your command line.
 
 ```tsx
 import { useState } from 'react';
-import { useDebounce } from 'ahooks';
+import { useDebounce } from '@raddix/use-debounce';
 
 export default function App() {
   const [value, setValue] = useState<string>();
-  const debouncedValue = useDebounce(value, { wait: 500 });
+  const debouncedValue = useDebounce(value, 800);
 
   return (
     <div>

docs/es/use-client.mdx

@@ -0,0 +1,46 @@
+---
+title: useClient
+description: Determina si el código se está ejecutando en el lado del cliente.
+---
+
+## Instalación
+
+Instale el custom hook desde su terminal.
+
+<Snippet pkg text='@raddix/use-client' />
+
+## Uso
+
+```tsx
+import { useClient } from '@raddix/use-client'
+
+export default function App() {
+  const isClient = useClient()
+
+  return(
+    <div>
+      <h6>Is Client? </h6>
+      <p>{isClient ? "Yes" : "No"}</p>
+    </div>
+  )
+}
+```
+
+## API
+
+### Devuelve
+
+<ApiTable
+  head={{
+    name: 'Nombre',
+    description: 'Descripción',
+    type: 'Tipo'
+  }}
+  data={[
+    {
+      name: 'isClient',
+      description: 'true si se ejecuta en un entorno del lado del cliente, en caso contrario false.',
+      type: 'boolean'
+    }
+  ]}
+/>

docs/es/use-debounce.mdx

@@ -13,11 +13,11 @@ Instala el custom hook desde su linea de comando.
 
 ```tsx
 import { useState } from 'react';
-import { useDebounce } from 'ahooks';
+import { useDebounce } from '@raddix/use-debounce';
 
 export default function App() {
   const [value, setValue] = useState<string>();
-  const debouncedValue = useDebounce(value, { wait: 500 });
+  const debouncedValue = useDebounce(value, 800);
 
   return (
     <div>

packages/hooks/use-client/README.md

@@ -0,0 +1,5 @@
+# useClient
+
+A hook that determine whether the code is running on the client-side.
+
+Please refer to the [documentation](https://raddix.dev/hooks/use-client) for more information.

packages/hooks/use-client/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@raddix/use-client",
+  "description": "A hook that determine whether the code is running on the client-side.",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "author": "Moises Machuca Valverde <[email protected]> (https://www.moisesmachuca.com)",
+  "homepage": "https://raddix.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gdvu/raddix.git"
+  },
+  "keywords": [
+    "react-hook",
+    "react-client-hook",
+    "react-use-client",
+    "use-client",
+    "use-client-hook",
+    "hook-client"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint \"{src,tests}/*.{ts,tsx,css}\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "build": "tsup src --dts",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

packages/hooks/use-client/src/index.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export const useClient = (): boolean => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient;
+};

packages/hooks/use-client/tests/index.test.ts

@@ -0,0 +1,10 @@
+import { renderHook } from '@testing-library/react';
+import { useClient } from '../src';
+
+describe('useClient test:', () => {
+  test('should be true', () => {
+    const { result } = renderHook(() => useClient(), { hydrate: true });
+
+    expect(result.current).toBe(true);
+  });
+});