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

Add refs support in use-event-listener target params

.changeset/tiny-tables-switch.md

@@ -0,0 +1,7 @@
+---
+'classic-react-hooks': minor
+---
+
+-  Add refs support in use-event-listener
+-  Update doc for use-event-listener
+-  Add new test case for testing refs in use-event-listener

apps/doc/.vitepress/config.mts

@@ -28,7 +28,7 @@ export default defineConfig({
          },
          {
             text: 'API',
-            link: '/hooks/use-synced-ref',
+            link: '/getting-started/overview',
          },
          {
             text: `v${version}`,

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

@@ -35,17 +35,14 @@ type Handler = (event: Event) => void
 ### Usage
 
 ```ts
+import { useRef } from 'react'
 import { useEventListener } from 'classic-react-hooks'
 
 export default function YourComponent() {
    const ref = useRef()
-   useEventListener(
-      () => ref.current,
-      'click',
-      (e) => {
-         console.log(e)
-      }
-   )
+   useEventListener(ref, 'click', (e) => {
+      console.log(e)
+   })
 
    return (
       <div>

package.json

@@ -16,7 +16,7 @@
       "access": "public",
       "provenance": true
    },
-   "homepage": "https://github.com/Ashish-simpleCoder/classic-react-hooks",
+   "homepage": "https://classic-react-hooks.vercel.app",
    "author": "Ashish-simpleCoder",
    "license": "MIT",
    "private": false,

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

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react'
 import { vi } from 'vitest'
 import { useEventListener } from '.'
 
-describe('use-outside-click', () => {
+describe('use-event-listener', () => {
    it('should render', () => {
       renderHook(() => useEventListener(null, 'click', () => {}))
    })
@@ -33,6 +33,29 @@ describe('use-outside-click', () => {
       expect(removeSpy).toHaveBeenCalledTimes(2)
    })
 
+   it('should work with refs', () => {
+      const div = document.createElement('div')
+      const addSpy = vi.spyOn(div, 'addEventListener')
+      const removeSpy = vi.spyOn(div, 'removeEventListener')
+
+      const ref = { current: div }
+
+      const { rerender, unmount } = renderHook(() => {
+         useEventListener(ref, 'resize', () => {}, { passive: true })
+      })
+
+      expect(addSpy).toHaveBeenCalledTimes(1)
+      expect(removeSpy).toHaveBeenCalledTimes(0)
+
+      rerender()
+      expect(addSpy).toHaveBeenCalledTimes(1)
+      expect(removeSpy).toHaveBeenCalledTimes(0)
+
+      unmount()
+      expect(addSpy).toHaveBeenCalledTimes(1)
+      expect(removeSpy).toHaveBeenCalledTimes(1)
+   })
+
    it('should fire listener on event trigger with proper context', () => {
       const div = document.createElement('div')
       const listener = vi.fn()

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

@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react'
+import React, { RefObject, useEffect } from 'react'
 import useSyncedRef from '../use-synced-ref'
 
-type Target = null | EventTarget | (() => EventTarget | null)
+type Target = null | EventTarget | RefObject<EventTarget> | (() => EventTarget | null)
 type Options = boolean | AddEventListenerOptions
 type Handler = (event: Event) => void
 
@@ -18,7 +18,7 @@ type Handler = (event: Event) => void
    
    export default function YourComponent() {
       const ref = useRef()
-      useEventListener(() => ref.current, 'click', (e) =>{
+      useEventListener(ref, 'click', (e) =>{
          console.log(e)
       })
 
@@ -71,11 +71,19 @@ export function useEventListener(
       const options = listener.current.options
 
       if (shouldInjectEvent) {
-         node.addEventListener(event, callback, options)
+         if ('current' in node) {
+            node.current?.addEventListener(event, callback, options)
+         } else {
+            node.addEventListener(event, callback, options)
+         }
       }
 
       return () => {
-         node.removeEventListener(event, callback, options)
+         if ('current' in node) {
+            node.current?.removeEventListener(event, callback, options)
+         } else {
+            node.removeEventListener(event, callback, options)
+         }
       }
    }, [event, target, shouldInjectEvent])
 }