fix: Fix useClickOutside ref ts type

0xOmarAdel · Mar 15, 2024 · 190daa2 · 190daa2
1 parent e087645
commit 190daa2
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 17 deletions.
diff --git a/dist/index.d.mts b/dist/index.d.mts
@@ -1,4 +1,4 @@
-import { RefObject, DependencyList } from 'react';
+import { DependencyList } from 'react';
 import { AxiosRequestConfig } from 'axios';
 
 type RequestConfig = {
@@ -15,7 +15,10 @@ declare const useFetch: () => {
 };
 
 type ClickOutsideCallback = () => void;
-declare const useClickOutside: (callbackFun: ClickOutsideCallback) => RefObject<HTMLElement | null>;
+type SafeRefObject<T> = {
+    readonly current: T;
+};
+declare const useClickOutside: <T extends HTMLElement>(callbackFun: ClickOutsideCallback) => SafeRefObject<T>;
 
 type EffectFunction = () => void;
 declare const useEffectExceptFirstRender: (func: EffectFunction, deps: DependencyList) => void;

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -1,4 +1,4 @@
-import { RefObject, DependencyList } from 'react';
+import { DependencyList } from 'react';
 import { AxiosRequestConfig } from 'axios';
 
 type RequestConfig = {
@@ -15,7 +15,10 @@ declare const useFetch: () => {
 };
 
 type ClickOutsideCallback = () => void;
-declare const useClickOutside: (callbackFun: ClickOutsideCallback) => RefObject<HTMLElement | null>;
+type SafeRefObject<T> = {
+    readonly current: T;
+};
+declare const useClickOutside: <T extends HTMLElement>(callbackFun: ClickOutsideCallback) => SafeRefObject<T>;
 
 type EffectFunction = () => void;
 declare const useEffectExceptFirstRender: (func: EffectFunction, deps: DependencyList) => void;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hookverse",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

diff --git a/src/hooks/useClickOutside.tsx b/src/hooks/useClickOutside.tsx
@@ -1,11 +1,12 @@
-import { useEffect, useRef, RefObject } from "react";
+import { useEffect, useRef } from "react";
 
 type ClickOutsideCallback = () => void;
+type SafeRefObject<T> = { readonly current: T };
 
-const useClickOutside = (
+const useClickOutside = <T extends HTMLElement>(
   callbackFun: ClickOutsideCallback
-): RefObject<HTMLElement | null> => {
-  const elementRef = useRef<HTMLElement | null>(null);
+): SafeRefObject<T> => {
+  const elementRef = useRef<T>(HTMLElement as unknown as T);
   const callBackFunRef = useRef<ClickOutsideCallback | null>(null);
   callBackFunRef.current = callbackFun;