useHash added

resolves #14
PunitSoniME · Jan 12, 2024 · 623db4b · 623db4b
1 parent 8a4f6d3
commit 623db4b
Show file tree

Hide file tree

Showing 34 changed files with 210 additions and 1,051 deletions.
diff --git a/README.md b/README.md
@@ -37,103 +37,33 @@ or
 yarn add react-helper-hooks
 ```
 
-## Usage
+## Available Hooks
+
+- useArray - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useArray)
+- useAsync - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useAsync)
+- useAsyncLoop - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useAsyncLoop)
+- useColorBlend - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useColorBlend)
+- useCopyToClipboard - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useCopyToClipboard)
+- useDebounce - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useDebounce)
+- useEventListener - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useEventListener)
+- useFetch - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useFetch)
+- useGeolocation - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useGeolocation)
+- useGroupByFirstLetter - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useGroupByFirstLetter)
+- useIsAppOffline - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useIsAppOffline)
+- usePrevious - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#usePrevious)
+- useScript - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useScript)
+- useScrollToTop - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useScrollToTop)
+- useSpeech - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useSpeech)
+- useStateJson - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useStateJson)
+- useStateWithHistory - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useStateWithHistory)
+- useStorage - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useStorage)
+- useSubdomain - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useSubdomain)
+- useTimeout - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useTimeout)
+- useToggle - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useToggle)
+- useUpdateEffect - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useUpdateEffect)
+- useWindowDimensions - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useWindowDimensions)
+- useWindowFocus - [![][documentation-demo]](https://react-helper-hooks.vercel.app/#useWindowFocus)
 
------------------------------
-
-- [`useArray`](./src/docs/useArray.md) &mdash; This hook contains many methods of array like push, update, remove, filter, update, clear etc... [![][img-demo]](https://codesandbox.io/s/usearray-desdu)
-
------------------------------
-
-- [`useAsync`](./src/docs/useAsync.md) &mdash; This hook will help you to handle async methods [![][img-demo]](https://codesandbox.io/s/useasync-en2ms)
-
------------------------------
-
-- [`useAsyncLoop`](./src/docs/useAsyncLoop.md) &mdash; This hook will help you to get the height, width, dimensions of browser, You can check either device is mobile or laptop or tablet or desktop or extra large device [![][img-demo]](https://codesandbox.io/s/useasyncloop-t53pw)
-
------------------------------
-
-- [`useColorBlend`](./src/docs/useColorBlend.md) &mdash; A hook that generates blend color by passing 2 array [![][img-demo]](https://codesandbox.io/s/usecolorblend-781bv)
-
------------------------------
-
-- [`useCopyToClipboard`](./src/docs/useCopyToClipboard.md) &mdash; This hook will help you to copy a thing which you want [![][img-demo]](https://codesandbox.io/s/usecopytoclipboard-3yqhc)
-
------------------------------
-
-- [`useDebounce`](./src/docs/useDebounce.md) &mdash; This hook will help you to handle debounce ( Execute method once user stop typing ). [![][img-demo]](https://codesandbox.io/s/usedebounce-yuvjt)
-
------------------------------
-
-- [`useEventListener`](./src/docs/useEventListener.md) &mdash; This hook will help you to handle eventListener functionalities [![][img-demo]](https://codesandbox.io/s/useeventlistener-l5wy6)
-
------------------------------
-
-- [`useFetch`](./src/docs/useFetch.md) &mdash; This hook will help you to handle fetch functionalities, which internally uses useAsync hook for async process [![][img-demo]](https://codesandbox.io/s/usefetch-kduom)
-
------------------------------
-
-- [`useGeolocation`](./src/docs/useGeolocation.md) &mdash; This hook will help you to get latitude and longitude of user [![][img-demo]](https://codesandbox.io/s/usegeolocation-uyo9y)
-
------------------------------
-
-- [`useGroupByFirstLetter`](./src/docs/useGroupByFirstLetter.md) &mdash; A hook that helps you to group by the data by first letter [![][img-demo]](https://codesandbox.io/s/usegroupbyfirstletter-wow78n)
-
------------------------------
-
-- [`useIsAppOffline`](./src/docs/useIsAppOffline.md) &mdash; This hook will help you to know your application is running of active internet or you are offline [![][img-demo]](https://codesandbox.io/s/useisappoffline-1tgjf)
-
------------------------------
-
-- [`usePrevious`](./src/docs/usePrevious.md) &mdash; This hook returns the previous value of defined variable [![][img-demo]](https://codesandbox.io/s/useprevious-xkc74)
-
------------------------------
-
-- [`useScript`](./src/docs/useScript.md) &mdash; This hook will help you to import external script [![][img-demo]](https://codesandbox.io/s/usescript-ungdm)
-
------------------------------
-
-- [`useScrollToTop`](./src/docs/useScrollToTop.md) &mdash; A hook that helps you to scroll to top with smooth transition [![][img-demo]](https://codesandbox.io/s/usescrolltotop-g539ex)
-
------------------------------
-
-- [`useSpeech`](./src/docs/useSpeech.md) &mdash; This hook will help you implement speeching facility.
-
------------------------------
-
-- [`useStateJson`](./src/docs/useStateJson.md) &mdash; A hook that stores a state as a JSON string to prevent unnecessary render updates. [![][img-demo]](https://codesandbox.io/s/usestatejson-u3i0r)
-
------------------------------
-
-- [`useStateWithHistory`](./src/docs/useStateWithHistory.md) &mdash; This hook used to maintain history of any data [![][img-demo]](https://codesandbox.io/s/usestatewithhistory-pgojt)
-
------------------------------
-
-- [`useStorage`](./src/docs/useStorage.md) &mdash; This hook will help you to handle localStorage and sessionStorage [![][img-demo]](https://codesandbox.io/s/usestorage-p4dnk)
-
------------------------------
-
-- [`useSubdomain`](./src/docs/useSubdomain.md) &mdash; This hook will return the subdomain of the application from url [![][img-demo]](https://codesandbox.io/s/usesubdomain-rc4n0)
-
------------------------------
-
-- [`useTimeout`](./src/docs/useTimeout.md) &mdash; This hook will help you to handle timeout ( just like setTimeout, but with more functionalities ). [![][img-demo]](https://codesandbox.io/s/usetimeout-fk8g9)
-
------------------------------
-
-- [`useToggle`](./src/docs/useToggle.md) &mdash; This hook will help you to handle toggle. [![][img-demo]](https://codesandbox.io/s/usetoggle-927kw)
-
------------------------------
-
-- [`useUpdateEffect`](./src/docs/useUpdateEffect.md) &mdash; This hook will be used to call method after the value of <code>useUpdateEffect dependencies</code> changed, it will not be called on first render. [![][img-demo]](https://codesandbox.io/s/useupdateeffect-iik03)
-
------------------------------
-
-- [`useWindowDimensions`](./src/docs/useWindowDimensions.md) &mdash; This hook will help you to get the height, width, dimensions of browser, You can check either device is mobile or laptop or tablet or desktop or extra large device [![][img-demo]](https://codesandbox.io/s/usewindowdimensions-dyhep)
-
------------------------------
-
-- [`useWindowFocus`](./src/docs/useWindowFocus.md) &mdash; This hook will help you to hide/show the sensitive information. Below example will help you to understand [![][img-demo]](https://codesandbox.io/s/usewindowfocus-kk282)
 
 -----------------------------
 
@@ -155,6 +85,4 @@ yarn add react-helper-hooks
 
 MIT © [PunitSoniME](https://github.com/PunitSoniME)
 
-[img-demo]: https://img.shields.io/badge/demo-🚀-blue.svg
-
-
+[documentation-demo]: https://img.shields.io/badge/documentation-🚀-blue.svg
diff --git a/example/src/common/Details/RedirectToExample.tsx b/example/src/common/Details/RedirectToExample.tsx
@@ -11,7 +11,7 @@ export default function RedirectToExample({ hook }: any) {
         <>
             <Button size="sm" className='mt-2'
                 onClick={() => {
-                    window.open(`${hookCodeUrl}/${hook}/index.tsx`, '_blank');
+                    window.open(`${exampleCodeUrl}/${hook}/index.tsx`, '_blank');
                 }}
             >
                 Example Code
@@ -20,7 +20,7 @@ export default function RedirectToExample({ hook }: any) {
 
             <Button size="sm" variant="secondary" className='ml-2 mt-2'
                 onClick={() => {
-                    window.open(`${exampleCodeUrl}/${hook}/index.tsx`, '_blank');
+                    window.open(`${hookCodeUrl}/${hook}/index.tsx`, '_blank');
                 }}
             >
                 Source code of hook

diff --git a/example/src/hooks/useDebounce/index.tsx b/example/src/hooks/useDebounce/index.tsx
@@ -18,7 +18,7 @@ export default function Component() {
             TIMER - number - Pass seconds in milliseconds format.
             DEPENDENCIES - Array - Collection of dependencies, Callback function will execute when the value of any dependencies change
     */
-    ${hook}(() => { CODE_TO_EXECUTE }, 1000, [DEPENDENCIES]);
+    ${hook}(() => { CODE_TO_EXECUTE }, TIMER, [DEPENDENCIES]);
 }`
 
 const timer = 1000;

diff --git a/example/src/hooks/useHash/index.tsx b/example/src/hooks/useHash/index.tsx
@@ -0,0 +1,55 @@
+import { lazy, Suspense } from 'react';
+import { useHash } from '../../../..';
+import { Button } from '@/components/ui/button';
+import { packageName } from '@/lib/utils';
+import Muted from '@/common/Muted';
+
+const Block = lazy(() => import('@/common/Details/Block'));
+const Documentation = lazy(() => import('@/common/Documentation'));
+
+const hook = 'useHash';
+const info = 'Helps you to get current hash and allows you to update hash of URL';
+
+const usage: string = `import { ${hook} } from '${packageName}';
+
+export default function Component() {
+    /*
+        @returns
+            hash - any - Variable name
+            useHash - function - The function to update the value of the variable
+    */
+    const [isSelected, toggleSelected] = ${hook}(INITIAL_VALUE);
+}`
+
+export default function HashComponent() {
+
+    const [hash, setHash] = useHash();
+
+    return (
+        <Suspense fallback={<></>}>
+
+            <Documentation
+                hook={hook}
+                info={info}
+                usage={usage}
+            >
+                <Block title='Example'>
+                    <div className="mb-2">Current Hash - {hash}</div>
+
+                    <Button size="sm"
+                        className='mt-4'
+                        onClick={() => {
+                            setHash("testing-hook");
+                        }}>Update Hash</Button>
+
+                    <Muted className="mt-2">
+                        Clicking on above button will update the hash in url, but also it will redirect you to 404 page
+                    </Muted>
+                </Block>
+
+            </Documentation>
+
+        </Suspense>
+
+    )
+}
diff --git a/example/src/hooks/useSpeech/index.tsx b/example/src/hooks/useSpeech/index.tsx
@@ -31,6 +31,12 @@ export default function SpeechComponent() {
     const [text, setText] = useState("Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nam veritatis incidunt debitis. Repellendus at corrupti odit, nam deleniti cum fugiat temporibus libero suscipit harum fugit aliquid saepe minima ipsam.");
     const { play, resume, pause, stop, loadSpeech, currentPlayingState } = useSpeech();
 
+    const disablePlayButton = !(currentPlayingState === 'initialized');
+    const disablePauseButton = !(['playing', 'resumed'].includes(currentPlayingState));
+    const disableResumeButton = currentPlayingState !== 'paused';
+    const disableStopButton = !(['playing', 'resumed', 'paused'].includes(currentPlayingState));
+
+
     return (
         <Suspense fallback={<></>}>
 
@@ -45,29 +51,30 @@ export default function SpeechComponent() {
                     <Textarea
                         defaultValue={text}
                         className='mb-4'
+                        disabled={disablePlayButton}
                         onChange={(e) => {
                             setText(e.target.value);
                         }} />
 
                     <div className="flex gap-3 mb-2">
-                        <Button size="sm" disabled={!(currentPlayingState === 'initialized')}
+                        <Button size="sm" disabled={disablePlayButton}
                             onClick={() => {
                                 loadSpeech(document.getElementById('text-to-speech-content'), text);
                                 play();
                             }}>Play</Button>
 
-                        <Button size="sm" disabled={!(['playing', 'resumed'].includes(currentPlayingState))}
+                        <Button size="sm" disabled={disablePauseButton}
                             onClick={() => {
                                 pause();
                             }}>Pause</Button>
 
-                        <Button size="sm" disabled={currentPlayingState !== 'paused'}
+                        <Button size="sm" disabled={disableResumeButton}
                             onClick={() => {
                                 resume();
                             }}>Resume</Button>
 
                         <Button size="sm" variant="destructive"
-                            disabled={!(['playing', 'resumed', 'paused'].includes(currentPlayingState))}
+                            disabled={disableStopButton}
                             onClick={() => {
                                 stop();
                             }}>Stop</Button>
@@ -85,7 +92,7 @@ export default function SpeechComponent() {
 
                 </Block>
             </Documentation>
-            
+
         </Suspense>
     )
 }
diff --git a/example/src/lib/utils.ts b/example/src/lib/utils.ts
@@ -36,63 +36,53 @@ const StorageComponent = lazy(() => import('@/hooks/useStorage'));
 const AsyncComponent = lazy(() => import('@/hooks/useAsync'));
 const SpeechComponent = lazy(() => import('@/hooks/useSpeech'));
 const ProvidersTreeComponent = lazy(() => import('@/hooks/useProvidersTree'));
+const HashComponent = lazy(() => import('@/hooks/useHash'));
 
-export const hooks: Record<string, any> = {
-  'useToggle': ToggleComponent,
-  'useTimeout': TimeoutComponent,
-  'useDebounce': DebounceComponent,
-  'useUpdateEffect': UpdateEffectComponent,
-  'useArray': ArrayComponent,
-  'usePrevious': PreviousComponent,
-  'useStateWithHistory': StateWithHistoryComponent,
-  'useStorage': StorageComponent,
-  'useAsync': AsyncComponent,
-  'useFetch': FetchComponent,
-  'useScript': ScriptComponent,
-  'useEventListener': EventListenerComponent,
-  'useIsAppOffline': IsAppOfflineComponent,
-  'useWindowDimensions': WindowDimensionsComponent,
-  'useGeolocation': GeolocationComponent,
-  'useAsyncLoop': AsyncLoopComponent,
-  'useWindowFocus': WindowFocusComponent,
-  'useSubdomain': SubdomainComponent,
-  'useCopyToClipboard': CopyToClipboardComponent,
-  'useStateJson': StateJsonComponent,
-  'useColorBlend': ColorBlendComponent,
-  'useGroupByFirstLetter': GroupByFirstLetterComponent,
-  'useScrollToTop': ScrollToTopComponent,
-  'useSpeech': SpeechComponent,
-  'useProvidersTree': ProvidersTreeComponent
-};
+export const hooks = [
+  { key: 'useToggle', Component: ToggleComponent },
+  { key: 'useTimeout', Component: TimeoutComponent },
+  { key: 'useDebounce', Component: DebounceComponent },
+  { key: 'useUpdateEffect', Component: UpdateEffectComponent },
+  { key: 'useArray', Component: ArrayComponent },
+  { key: 'usePrevious', Component: PreviousComponent },
+  { key: 'useStateWithHistory', Component: StateWithHistoryComponent },
+  { key: 'useStorage', Component: StorageComponent },
+  { key: 'useAsync', Component: AsyncComponent },
+  { key: 'useFetch', Component: FetchComponent },
+  { key: 'useScript', Component: ScriptComponent },
+  { key: 'useEventListener', Component: EventListenerComponent },
+  { key: 'useIsAppOffline', Component: IsAppOfflineComponent },
+  { key: 'useWindowDimensions', Component: WindowDimensionsComponent },
+  { key: 'useGeolocation', Component: GeolocationComponent },
+  { key: 'useAsyncLoop', Component: AsyncLoopComponent },
+  { key: 'useWindowFocus', Component: WindowFocusComponent },
+  { key: 'useSubdomain', Component: SubdomainComponent },
+  { key: 'useCopyToClipboard', Component: CopyToClipboardComponent },
+  { key: 'useStateJson', Component: StateJsonComponent },
+  { key: 'useColorBlend', Component: ColorBlendComponent },
+  { key: 'useGroupByFirstLetter', Component: GroupByFirstLetterComponent },
+  { key: 'useScrollToTop', Component: ScrollToTopComponent },
+  { key: 'useSpeech', Component: SpeechComponent, isNew: true },
+  { key: 'useProvidersTree', Component: ProvidersTreeComponent, isNew: true },
+  { key: 'useHash', Component: HashComponent, isNew: true }
+];
 
 export const props = {
   'useTimeout': { defaultTimeout: 15000 }
 }
 
-const codeSandboxUrl = 'https://codesandbox.io/s'
+export const sortBasedOnString = (data: any[], key: string) => {
+  return [...data].sort((a: any, b: any) => {
+    const value1 = a[key]?.toLowerCase();
+    const value2 = b[key]?.toLowerCase();
 
-export const examleSandboxLinks: Record<string, string> = {
-  'useToggle': `${codeSandboxUrl}/usetoggle-927kw`,
-  'useTimeout': `${codeSandboxUrl}/usetimeout-fk8g9`,
-  'useDebounce': `${codeSandboxUrl}/usedebounce-yuvjt`,
-  'useUpdateEffect': `${codeSandboxUrl}/useupdateeffect-iik03`,
-  'useArray': `${codeSandboxUrl}/usearray-desdu`,
-  'usePrevious': `${codeSandboxUrl}/useprevious-xkc74`,
-  'useStateWithHistory': `${codeSandboxUrl}/usestatewithhistory-pgojt`,
-  'useStorage': `${codeSandboxUrl}/usestorage-p4dnk`,
-  'useAsync': `${codeSandboxUrl}/useasync-en2ms`,
-  'useFetch': `${codeSandboxUrl}/usefetch-kduom`,
-  'useScript': `${codeSandboxUrl}/usescript-ungdm`,
-  'useEventListener': `${codeSandboxUrl}/useeventlistener-l5wy6`,
-  'useIsAppOffline': `${codeSandboxUrl}/useisappoffline-uyo9y`,
-  'useWindowDimensions': `${codeSandboxUrl}/usewindowdimensions-dyhep`,
-  'useGeolocation': `${codeSandboxUrl}/usegeolocation-1tgjf`,
-  'useAsyncLoop': `${codeSandboxUrl}/useasyncloop-t53pw`,
-  'useWindowFocus': `${codeSandboxUrl}/usewindowfocus-kk282`,
-  'useSubdomain': `${codeSandboxUrl}/usesubdomain-rc4n0`,
-  'useCopyToClipboard': `${codeSandboxUrl}/usecopytoclipboard-3yqhc`,
-  'useStateJson': `${codeSandboxUrl}/usestatejson-u3i0r`,
-  'useColorBlend': `${codeSandboxUrl}/usecolorblend-781bv`,
-  'useGroupByFirstLetter': `${codeSandboxUrl}/usegroupbyfirstletter-wow78n`,
-  'useScrollToTop': `${codeSandboxUrl}/usescrolltotop-g539ex`,
+    if (value1 < value2) {
+      return -1;
+    }
+    if (value1 > value2) {
+      return 1;
+    }
+
+    return 0;
+  })
 }