feature: add new hook useescClose for closing element in keypress

packages/usehooks-ts/src/index.ts

@@ -31,3 +31,5 @@ export * from './useTimeout'
 export * from './useToggle'
 export * from './useUnmount'
 export * from './useWindowSize'
+
+export * from './useEscclose'

packages/usehooks-ts/src/useEscclose/index.ts

@@ -0,0 +1 @@
+export * from './useEscclose'

packages/usehooks-ts/src/useEscclose/useEscclose.demo.tsx

@@ -0,0 +1,16 @@
+import { useState } from 'react'
+
+import { useEscclose } from './useEscclose'
+
+// Example Like Modal Component
+export default function Component() {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  const handleClose = () => {
+    setIsOpen(false)
+  }
+
+  useEscclose(isOpen, handleClose)
+
+  return <div>Put a Component to close on esc(ex. modal)</div>
+}

packages/usehooks-ts/src/useEscclose/useEscclose.md

@@ -0,0 +1,5 @@
+A simple hook to close element on esc press
+
+Related hooks:
+
+- [`useOnClickOutside()`](/react-hook/use-on-click-outside)

packages/usehooks-ts/src/useEscclose/useEscclose.test.ts

@@ -0,0 +1,71 @@
+import { act, renderHook } from '@testing-library/react'
+
+import { useEscclose } from './useEscclose'
+
+describe('useEscclose()', () => {
+  let onCloseMock: jest.Mock
+
+  beforeEach(() => {
+    onCloseMock = jest.fn()
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should not call onClose if isOpen is false', () => {
+    renderHook(() => {
+      useEscclose(false, onCloseMock)
+    })
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', { key: 'Escape' })
+      window.dispatchEvent(event)
+    })
+
+    expect(onCloseMock).not.toHaveBeenCalled()
+  })
+
+  it('should call onClose when ESC key is pressed and isOpen is true', () => {
+    renderHook(() => {
+      useEscclose(true, onCloseMock)
+    })
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', { key: 'Escape' })
+      window.dispatchEvent(event)
+    })
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not call onClose for other keys', () => {
+    renderHook(() => {
+      useEscclose(true, onCloseMock)
+    })
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', { key: 'Enter' })
+      window.dispatchEvent(event)
+    })
+
+    expect(onCloseMock).not.toHaveBeenCalled()
+  })
+
+  it('should clean up the event listener on unmount', () => {
+    const { unmount } = renderHook(() => {
+      useEscclose(true, onCloseMock)
+    })
+
+    act(() => {
+      unmount()
+    })
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', { key: 'Escape' })
+      window.dispatchEvent(event)
+    })
+
+    expect(onCloseMock).not.toHaveBeenCalled()
+  })
+})

packages/usehooks-ts/src/useEscclose/useEscclose.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+
+/**
+ * Custom hook that set handler to close element by ESC.
+ * @param {boolean} [isOpen] - Boolean value if element is open.
+ * @param {() => void} onClose - Function Logic to execute when closed.
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState<boolean>(false);
+ *
+ * const closeHandler = () => {
+ *  setIsOpen(false);
+ *  // ...Things to do when close
+ * }
+ *
+ * const  = useEscclose(isOpen, closeHandler)
+ * ```
+ */
+export function useEscclose(isOpen: boolean, onClose: () => void): void {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isOpen && event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen, onClose])
+}