Merge pull request #39 from Ashish-simpleCoder/feature/develop-hooks

Minor version release

.changeset/sharp-hornets-heal.md

@@ -0,0 +1,9 @@
+---
+'classic-react-hooks': minor
+---
+
+- doc: update description for delay in use-debounced-fn
+- doc: update use-outside-click hook doc for new option param
+- feat: add Options param in use-outside-click hook
+- doc: remove return type from use-event-listener doc
+- type: export use-event-listener params types

apps/doc/hooks/use-debounced-fn.md

@@ -8,10 +8,10 @@ outline: deep
 
 ### Parameters
 
-| Parameter |   Type   | Required | Default Value | Description                                 |
-| --------- | :------: | :------: | :-----------: | ------------------------------------------- |
-| cb        | Function |    ✅    |       -       | A callback which is to be debounced.        |
-| delay     |  number  |    ❌    |     true      | A delay after that the callback gets fired. |
+| Parameter |   Type   | Required | Default Value | Description                                                 |
+| --------- | :------: | :------: | :-----------: | ----------------------------------------------------------- |
+| cb        | Function |    ✅    |       -       | A callback which is to be debounced.                        |
+| delay     |  number  |    ❌    |      300      | A delay in milliseconds after that the callback gets fired. |
 
 ### Returns
 

apps/doc/hooks/use-event-listener.md

@@ -15,10 +15,6 @@ outline: deep
 | handler   | [Handler](#parametertype) |    ❌    |   undefined   | Callback for the event         |
 | options   | [Options](#parametertype) |    ❌    |   undefined   | For managing Event Propagation |
 
-### Returns
-
-`cleanup function` : Cleanup function for removing events manually.
-
 ### Types
 
 ---

apps/doc/hooks/use-outside-click.md

@@ -12,6 +12,7 @@ outline: deep
 | --------- | :-----------------------: | :------: | :-----------: | ----------------------------- |
 | target    | [Target](#parametertype)  |    ✅    |       -       | Reference of the html element |
 | handler   | [Handler](#parametertype) |    ❌    |   undefined   | Callback for the event        |
+| options   | [Options](#parametertype) |    ❌    |   undefined   | Extra params                  |
 
 ### Types
 
@@ -21,6 +22,7 @@ outline: deep
 
 ```ts
 type Target = null | EventTarget | (() => EventTarget | null)
+type Options = { shouldInjectEvent?: boolean | any }
 type Handler = (event: Event) => void
 ```
 
@@ -32,9 +34,13 @@ import { useOutsideClick } from 'classic-react-hooks'
 
 export default function YourComponent() {
    const modalRef = useRef(null)
-   useOutsideClick(modalRef, (e) => {
-      console.log('clicked outside on modal. Target = ', e.target)
-   })
+   useOutsideClick(
+      modalRef,
+      (e) => {
+         console.log('clicked outside on modal. Target = ', e.target)
+      },
+      { shouldInjectEvent: true }
+   )
 
    return (
       <div>

src/lib/use-event-listener/index.tsx

@@ -3,9 +3,9 @@ import type { Prettify } from '../../types'
 import React, { RefObject, useEffect } from 'react'
 import useSyncedRef from '../use-synced-ref'
 
-type Target = null | EventTarget | RefObject<EventTarget> | (() => EventTarget | null)
-type Options = boolean | Prettify<AddEventListenerOptions & { shouldInjectEvent?: boolean | any }>
-type Handler = (event: Event) => void
+export type Target = null | EventTarget | RefObject<EventTarget> | (() => EventTarget | null)
+export type Options = boolean | Prettify<AddEventListenerOptions & { shouldInjectEvent?: boolean | any }>
+export type Handler = (event: Event) => void
 
 /* Have taken reference from ChakraUI's use-event-listener for typing out the props in type-safe manner. */
 

src/lib/use-outside-click/index.tsx

@@ -1,10 +1,9 @@
 'use client'
-import React, { RefObject, useCallback } from 'react'
+import type { Target } from '../use-event-listener'
+import React, { useCallback } from 'react'
 import { useEventListener } from '../use-event-listener'
 import useSyncedRef from '../use-synced-ref'
 
-type Target = null | EventTarget | RefObject<EventTarget> | (() => EventTarget | null)
-
 /**
  * @description
  * A hook that fires the given callback when clicked outside anywhere of the given html element.
@@ -17,7 +16,7 @@ type Target = null | EventTarget | RefObject<EventTarget> | (() => EventTarget |
    
    export default function YourComponent() {
       const modalRef = useRef(null)
-      useOutsideClick(() => modalRef.current, (e) => {
+      useOutsideClick(modalRef, (e) => {
          console.log("clicked outside on modal. Target = ", e.target)
       }, true)
 
@@ -29,11 +28,19 @@ type Target = null | EventTarget | RefObject<EventTarget> | (() => EventTarget |
       )
    }
 */
-export default function useOutsideClick(target: Target, handler: (event: DocumentEventMap['click']) => void) {
+export default function useOutsideClick(
+   target: Target,
+   handler: (event: DocumentEventMap['click']) => void,
+   options?: { shouldInjectEvent?: boolean | any }
+) {
    const paramsRef = useSyncedRef({
       target,
       handler,
    })
+   let shouldInjectEvent = true
+   if (typeof options == 'object' && 'shouldInjectEvent' in options) {
+      shouldInjectEvent = !!options.shouldInjectEvent
+   }
 
    const eventCb = useCallback((event: DocumentEventMap['click']) => {
       const node = (typeof target == 'function' ? target() : target) ?? document
@@ -49,5 +56,5 @@ export default function useOutsideClick(target: Target, handler: (event: Documen
       paramsRef.current.handler(event)
    }, [])
 
-   useEventListener(document, 'click', eventCb)
+   useEventListener(document, 'click', eventCb, { shouldInjectEvent: shouldInjectEvent })
 }