feat: add useFocus hook

packages/usehooks-ts/src/index.ts

@@ -9,6 +9,7 @@ export * from './useDebounceValue'
 export * from './useDocumentTitle'
 export * from './useEventCallback'
 export * from './useEventListener'
+export * from './useFocus'
 export * from './useHover'
 export * from './useIntersectionObserver'
 export * from './useInterval'

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

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

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

@@ -0,0 +1,14 @@
+import { useFocus } from './useFocus'
+
+export default function Component() {
+  const [ref, isFocused] = useFocus<HTMLInputElement>((focusState: boolean) => {
+    console.log('Focus state:', focusState)
+  })
+
+  return (
+    <div>
+      <input ref={ref} type="text" placeholder="Focus me!" />
+      <p>The input is currently {isFocused ? 'focused' : 'unfocused'}</p>
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+The `useFocus` hook is a custom React hook that manages the focus state of a DOM element. This hook helps track whether a specific element is currently focused or not, and allows for an optional callback to be executed when the focus state changes.

packages/usehooks-ts/src/useFocus/useFocus.test.tsx

@@ -0,0 +1,10 @@
+import { renderHook } from '@testing-library/react'
+
+import { useFocus } from './useFocus'
+
+describe('useFocus()', () => {
+  it('The result must always be false initially', () => {
+    const { result } = renderHook(() => useFocus<HTMLInputElement>())
+    expect(result.current[1]).toBe(false)
+  })
+})

packages/usehooks-ts/src/useFocus/useFocus.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react'
+
+import type { RefObject } from 'react'
+
+/**A function to run in focus and blur HTML element mode */
+export type UseFocusCallback = (isFocused: boolean) => void
+
+/**
+ * Custom hook that manages focus state on a DOM element.
+ * @template T - The type of the DOM element. Defaults to `HTMLElement`.
+ * @param {UseFocusCallback} [callback] - Optional callback function that is invoked when the element gains or loses focus.
+ * @returns {[RefObject<T>, boolean]} - An array containing a ref object to attach to the HTML element and a boolean indicating if the element is focused.
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-focus)
+ * @example
+ * ```tsx
+ * const inputRef = useRef<HTMLInputElement>(null);
+ * const [ref, isFocused] = useFocus((focusState) => {
+ *   console.log('Focus state:', focusState);
+ * });
+ * // Access the ref to attach to your input element and use the isFocused variable to check the focus state.
+ * <input ref={ref} type="text" placeholder="Focus me!" />
+ * ```
+ */
+export function useFocus<T extends HTMLElement>(
+  callback?: UseFocusCallback,
+): [RefObject<T>, boolean] {
+  const [isFocused, setIsFocused] = useState(false)
+  const ref = useRef<T>(null)
+
+  useEffect(() => {
+    const handleFocus = () => {
+      setIsFocused(true)
+      callback?.(true)
+    }
+    const handleBlur = () => {
+      setIsFocused(false)
+      callback?.(false)
+    }
+
+    const node = ref.current
+    if (node) {
+      node.addEventListener('focus', handleFocus)
+      node.addEventListener('blur', handleBlur)
+    }
+
+    return () => {
+      if (node) {
+        node.removeEventListener('focus', handleFocus)
+        node.removeEventListener('blur', handleBlur)
+      }
+    }
+  }, [callback])
+
+  return [ref, isFocused]
+}