From 1a0b568cfedc0ecaefedc2ea3319282c71e8e456 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mois=C3=A9s=20Machuca=20Valverde?= Date: Mon, 8 Jul 2024 22:07:35 -0500 Subject: [PATCH] feat: add useClient hook (#99) A hook that determine whether the code is running on the client-side. --- .changeset/seven-meals-visit.md | 5 ++ docs/_config.json | 4 ++ docs/en/use-client.mdx | 46 +++++++++++++++++++ docs/en/use-debounce.mdx | 4 +- docs/es/use-client.mdx | 46 +++++++++++++++++++ docs/es/use-debounce.mdx | 4 +- packages/hooks/use-client/README.md | 5 ++ packages/hooks/use-client/package.json | 46 +++++++++++++++++++ packages/hooks/use-client/src/index.ts | 11 +++++ packages/hooks/use-client/tests/index.test.ts | 10 ++++ pnpm-lock.yaml | 9 ++++ 11 files changed, 186 insertions(+), 4 deletions(-) create mode 100644 .changeset/seven-meals-visit.md create mode 100644 docs/en/use-client.mdx create mode 100644 docs/es/use-client.mdx create mode 100644 packages/hooks/use-client/README.md create mode 100644 packages/hooks/use-client/package.json create mode 100644 packages/hooks/use-client/src/index.ts create mode 100644 packages/hooks/use-client/tests/index.test.ts diff --git a/.changeset/seven-meals-visit.md b/.changeset/seven-meals-visit.md new file mode 100644 index 0000000..d36fc03 --- /dev/null +++ b/.changeset/seven-meals-visit.md @@ -0,0 +1,5 @@ +--- +'@raddix/use-client': major +--- + +Added the useClient hook diff --git a/docs/_config.json b/docs/_config.json index 8ede624..481e792 100644 --- a/docs/_config.json +++ b/docs/_config.json @@ -74,6 +74,10 @@ "title": "Lifecycle", "heading": true, "children": [ + { + "title": "useClient", + "path": "/hooks/use-client" + }, { "title": "useTimeout", "path": "/hooks/use-timeout" diff --git a/docs/en/use-client.mdx b/docs/en/use-client.mdx new file mode 100644 index 0000000..cc34d95 --- /dev/null +++ b/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. + + + +## Usage + +```tsx +import { useClient } from '@raddix/use-client' + +export default function App() { + const isClient = useClient() + + return( +
+
Is Client?
+

{isClient ? "Yes" : "No"}

+
+ ) +} +``` + +## API + +### Returns + + \ No newline at end of file diff --git a/docs/en/use-debounce.mdx b/docs/en/use-debounce.mdx index 567ce9f..234dd0f 100644 --- a/docs/en/use-debounce.mdx +++ b/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(); - const debouncedValue = useDebounce(value, { wait: 500 }); + const debouncedValue = useDebounce(value, 800); return (
diff --git a/docs/es/use-client.mdx b/docs/es/use-client.mdx new file mode 100644 index 0000000..3517bbc --- /dev/null +++ b/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. + + + +## Uso + +```tsx +import { useClient } from '@raddix/use-client' + +export default function App() { + const isClient = useClient() + + return( +
+
Is Client?
+

{isClient ? "Yes" : "No"}

+
+ ) +} +``` + +## API + +### Devuelve + + \ No newline at end of file diff --git a/docs/es/use-debounce.mdx b/docs/es/use-debounce.mdx index 11abc04..d25eb8d 100644 --- a/docs/es/use-debounce.mdx +++ b/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(); - const debouncedValue = useDebounce(value, { wait: 500 }); + const debouncedValue = useDebounce(value, 800); return (
diff --git a/packages/hooks/use-client/README.md b/packages/hooks/use-client/README.md new file mode 100644 index 0000000..fc515ab --- /dev/null +++ b/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. diff --git a/packages/hooks/use-client/package.json b/packages/hooks/use-client/package.json new file mode 100644 index 0000000..7a92ff1 --- /dev/null +++ b/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 (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" + ] + } +} diff --git a/packages/hooks/use-client/src/index.ts b/packages/hooks/use-client/src/index.ts new file mode 100644 index 0000000..bb270d7 --- /dev/null +++ b/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; +}; diff --git a/packages/hooks/use-client/tests/index.test.ts b/packages/hooks/use-client/tests/index.test.ts new file mode 100644 index 0000000..8fee5a0 --- /dev/null +++ b/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); + }); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd028cf..9dafd65 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -226,6 +226,15 @@ importers: specifier: '>=16.8.0' version: 18.2.0(react@18.2.0) + packages/hooks/use-client: + dependencies: + react: + specifier: '>=16.8.0' + version: 18.2.0 + react-dom: + specifier: '>=16.8.0' + version: 18.2.0(react@18.2.0) + packages/hooks/use-clipboard: dependencies: '@raddix/use-timeout':