@reactuses/core 5.0.5 → 5.0.7

package/README.md

@@ -58,7 +58,7 @@ Refer to [documentations](https://reactuse.com/) for more details.
 
 ## Feedback
 
-You can submit an [issue](https://github.com/childrentime/reactuse/issues) or provide feedback on [Discord](https://discord.gg/WzDtCCFF).
+You can submit an [issue](https://github.com/childrentime/reactuse/issues) or provide feedback on [Discord](https://discord.gg/HMsq6cFkKp).
 
 <hr/>
 
@@ -66,6 +66,10 @@ You can submit an [issue](https://github.com/childrentime/reactuse/issues) or pr
 
 See the [**Contributing Guide**](https://github.com/childrentime/reactuse/blob/main/CONTRIBUTING.md)
 
+## ChangeLog
+
+See the [**ChangeLog**](https://github.com/childrentime/reactuse/blob/main/packages/core/changelog.md)
+
 <hr/>
 
 ## Thanks

package/dist/index.cjs

@@ -181,10 +181,13 @@ const useAsyncEffect = (effect, cleanup = noop, deps)=>{
 const listerOptions = {
     passive: true
 };
-const useClickOutside = (target, handler)=>{
+const useClickOutside = (target, handler, enabled = true)=>{
     const savedHandler = useLatest(handler);
     const listener = (event)=>{
-        const element = target.current;
+        if (!enabled) {
+            return;
+        }
+        const element = getTargetElement(target);
         if (!element) {
             return;
         }
@@ -822,19 +825,19 @@ const useDraggable = (target, options = {})=>{
     };
     const start = (e)=>{
         var _container_getBoundingClientRect;
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!filterEvent(e) || !element) {
             return;
         }
         if (options.exact && e.target !== element) {
             return;
         }
-        const container = containerElement == null ? void 0 : containerElement.current;
+        const container = getTargetElement(containerElement);
         const containerRect = container == null ? void 0 : (_container_getBoundingClientRect = container.getBoundingClientRect) == null ? void 0 : _container_getBoundingClientRect.call(container);
         const targetRect = element.getBoundingClientRect();
         const pos = {
-            x: e.clientX - (container ? targetRect.left - containerRect.left + container.scrollLeft : targetRect.left),
-            y: e.clientY - (container ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
+            x: e.clientX - (container && containerRect ? targetRect.left - (containerRect == null ? void 0 : containerRect.left) + container.scrollLeft : targetRect.left),
+            y: e.clientY - (container && containerRect ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
         };
         if ((options.onStart == null ? void 0 : options.onStart.call(options, pos, e)) === false) {
             return;
@@ -843,14 +846,14 @@ const useDraggable = (target, options = {})=>{
         handleEvent(e);
     };
     const move = (e)=>{
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!filterEvent(e) || !element) {
             return;
         }
         if (!pressedDelta) {
             return;
         }
-        const container = containerElement == null ? void 0 : containerElement.current;
+        const container = getTargetElement(containerElement);
         const targetRect = element.getBoundingClientRect();
         let { x, y } = position;
         x = e.clientX - pressedDelta.x;
@@ -885,7 +888,8 @@ const useDraggable = (target, options = {})=>{
     return [
         position.x,
         position.y,
-        !!pressedDelta
+        !!pressedDelta,
+        setPositon
     ];
 };
 
@@ -928,7 +932,7 @@ const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!element) {
             return;
         }
@@ -955,7 +959,7 @@ const useElementBounding = (target, options = defaultOptions$1)=>{
     const [x, setX] = React.useState(0);
     const [y, setY] = React.useState(0);
     const update = useEvent(()=>{
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!element) {
             if (reset) {
                 setHeight(0);
@@ -1055,7 +1059,7 @@ const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!element) {
             return;
         }
@@ -2076,7 +2080,7 @@ const useMousePressed = (target, options = defaultOptions$1)=>{
     const { touch = true, drag = true, initialValue = false } = options;
     const [pressed, setPressed] = React.useState(initialValue);
     const [sourceType, setSourceType] = React.useState(null);
-    const element = target == null ? void 0 : target.current;
+    const element = getTargetElement(target);
     const onPressed = React.useCallback((srcType)=>()=>{
             setPressed(true);
             setSourceType(srcType);

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, useEffect, Dispatch, SetStateAction, useLayoutEffect } from 'react';
+import react__default, { DependencyList, MutableRefObject, EffectCallback, Dispatch, SetStateAction, RefObject, useEffect, useLayoutEffect } from 'react';
 import Cookies from 'js-cookie';
 import { DebounceSettings, ThrottleSettings, DebouncedFunc as DebouncedFunc$1 } from 'lodash-es';
 import * as lodash from 'lodash';
@@ -38,6 +38,10 @@ deps?: DependencyList) => void;
 
 declare const useAsyncEffect: UseAsyncEffect;
 
+type TargetValue<T> = T | undefined | null;
+type TargetType = HTMLElement | Element | Window | Document | EventTarget;
+type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
+
 /**
  * @title useClickOutside
  */
@@ -46,12 +50,17 @@ type UseClickOutside = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 监听函数
  * @en listener fucntion
  */
-handler: (evt: EventType) => void) => void;
+handler: (evt: EventType) => void, 
+/**
+ * @zh 监听函数是否生效
+ * @en whether the listener fucntion is enabled
+ */
+enabled?: boolean) => void;
 type EventType = MouseEvent | TouchEvent;
 
 declare const useClickOutside: UseClickOutside;
@@ -166,10 +175,6 @@ min?: number | null) => readonly [
 
 declare const useCounter: UseCounter;
 
-type TargetValue<T> = T | undefined | null;
-type TargetType = HTMLElement | Element | Window | Document | EventTarget;
-type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
-
 declare const defaultOptions: UseCssVarOptions;
 /**
  * @title useCssVar
@@ -414,7 +419,7 @@ interface UseDoubleClickProps {
      * @zh dom对象
      * @en dom element
      */
-    target: RefObject<Element>;
+    target: BasicTarget<Element>;
     /**
      * @zh 延迟时间（毫秒）
      * @en latency time (milliseconds)
@@ -448,22 +453,24 @@ interface Position {
  * - x
  * - y
  * - 元素是否在拖动中
+ * - 设置元素的位置
  * @returns_en A tuple with the following elements:
  * - x
  * - y
  * - Whether the element is being dragged
+ * set the element position
  */
 type UseDraggable = (
 /**
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
  * @zh 可选参数
  * @en optional params
  */
-options?: UseDraggableOptions) => readonly [number, number, boolean];
+options?: UseDraggableOptions) => readonly [number, number, boolean, Dispatch<SetStateAction<Position>>];
 /**
  * @title  UseDraggableOptions
  */
@@ -497,7 +504,7 @@ interface UseDraggableOptions {
      * @zh 设置拖拽容器边界
      * @defaultValue undefined
      */
-    containerElement?: RefObject<HTMLElement | SVGAElement>;
+    containerElement?: BasicTarget<HTMLElement | SVGAElement>;
     /**
      * @en Handle that triggers the drag event
      * @zh 触发拖动事件的dom元素
@@ -545,7 +552,7 @@ type UseDropZone = (
  * @zh 目标元素
  * @en target element
  */
-target: RefObject<EventTarget>, 
+target: BasicTarget<EventTarget>, 
 /**
    * @zh 拖拽释放时候的回调
    * @en drop callback
@@ -562,7 +569,7 @@ type UseElementBounding = (
  * @zh 目标元素
  * @en target element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -664,7 +671,7 @@ type UseElementSize = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh `resizeObserver` 参数
  * @en options passed to `resizeObserver`
@@ -687,7 +694,7 @@ type UseElementVisibility = (
    * @zh dom对象
    * @en dom element
    */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
    * @zh 传递给 `intersectionObserver` 的选项
    * @en options passed to `intersectionObserver`
@@ -868,7 +875,7 @@ type UseFocus = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
  * @zh 默认值
  * @en defaultValue
@@ -920,7 +927,7 @@ type UseFullscreen = (
  * @zh dom元素
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -996,7 +1003,17 @@ options?: Partial<PositionOptions>) => {
 
 declare const useGeolocation: UseGeolocation;
 
-declare const useHover: <T extends Element = HTMLDivElement>(target: RefObject<T>) => boolean;
+/**
+ * @title useHover
+ */
+type UseHover = <T extends Element = HTMLDivElement>(
+/**
+ * @zh dom对象
+ * @en dom element
+ */
+target: BasicTarget<T>) => boolean;
+
+declare const useHover: UseHover;
 
 /**
  * @title UseIdle
@@ -1045,7 +1062,7 @@ type UseScroll = (
  * @zh dom元素
  * @en dom elment
  */
-target: RefObject<Element> | Window | Document, 
+target: BasicTarget<Element> | Window | Document, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1162,7 +1179,7 @@ type UseInfiniteScroll = (
  * @zh dom元素
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 加载更多函数
  * @en load more function
@@ -1264,7 +1281,29 @@ interface UseInfiniteScrollDirection {
 
 declare const useInfiniteScroll: UseInfiniteScroll;
 
-declare const useIntersectionObserver: (target: RefObject<Element>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => () => void;
+/**
+ * @title useIntersectionObserver
+ * @returns 停止监听函数
+ * @returns_en stop listening function
+ */
+type UseIntersectionObserver = (
+/**
+ * @zh dom元素
+ * @en dom element
+ */
+target: BasicTarget<Element>, 
+/**
+ * @zh 回调
+ * @en callback
+ */
+callback: IntersectionObserverCallback, 
+/**
+ * @zh 传递给 `IntersectionObserver` 的参数
+ * @en options passed to `IntersectionObserver`
+ */
+options?: IntersectionObserverInit) => () => void;
+
+declare const useIntersectionObserver: UseIntersectionObserver;
 
 /**
  * @title useInterval
@@ -1457,7 +1496,7 @@ type UseMeasure = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1594,7 +1633,7 @@ type UseMousePressed = (
  * @zh dom对象
  * @en dom element
  */
-target?: RefObject<Element>, 
+target?: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1628,7 +1667,7 @@ interface UseMousePressedOptions {
  */
 type UseMousePressedSourceType = "mouse" | "touch" | null;
 
-declare const useMousePressed: (target?: RefObject<Element>, options?: UseMousePressedOptions) => readonly [boolean, UseMousePressedSourceType];
+declare const useMousePressed: UseMousePressed;
 
 /**
  * @title UseMutationObserver
@@ -1921,7 +1960,27 @@ declare const useRafState: <S>(initialState: S | (() => S)) => readonly [S, Disp
 
 declare const useReducedMotion: (defaultState?: boolean) => boolean;
 
-declare const useResizeObserver: (target: RefObject<Element>, callback: ResizeObserverCallback, options?: ResizeObserverOptions) => () => void;
+/**
+ * @title useResizeObserver
+ */
+type UseResizeObserver = (
+/**
+ * @zh dom元素
+ * @en dom element
+ */
+target: BasicTarget<Element>, 
+/**
+ * @zh 回调
+ * @en callback
+ */
+callback: ResizeObserverCallback, 
+/**
+   * @zh `resizeObserver` 参数
+   * @en options passed to `resizeObserver`
+   */
+options?: ResizeObserverOptions) => () => void;
+
+declare const useResizeObserver: UseResizeObserver;
 
 declare const useScreenSafeArea: () => readonly [string, string, string, string, lodash.DebouncedFunc<() => void>];
 
@@ -2567,38 +2626,6 @@ baseUrl?: string,
  */
 rel?: string) => void;
 
-/**
- * @title useHover
- */
-type UseHover = <T extends Element = HTMLDivElement>(
-/**
- * @zh dom对象
- * @en dom element
- */
-target: RefObject<T>) => boolean;
-
-/**
- * @title useIntersectionObserver
- * @returns 停止监听函数
- * @returns_en stop listening function
- */
-type UseIntersectionObserver = (
-/**
- * @zh dom元素
- * @en dom element
- */
-target: RefObject<Element>, 
-/**
- * @zh 回调
- * @en callback
- */
-callback: IntersectionObserverCallback, 
-/**
- * @zh 传递给 `IntersectionObserver` 的参数
- * @en options passed to `IntersectionObserver`
- */
-options?: IntersectionObserverInit) => () => void;
-
 /**
  * @title useLocalStorage
  * @returns 包含以下元素的元组：
@@ -2727,26 +2754,6 @@ type UseReducedMotion = (
  */
 defaultState?: boolean) => boolean;
 
-/**
- * @title useResizeObserver
- */
-type UseResizeObserver = (
-/**
- * @zh dom元素
- * @en dom element
- */
-target: RefObject<Element>, 
-/**
- * @zh 回调
- * @en callback
- */
-callback: ResizeObserverCallback, 
-/**
-   * @zh `resizeObserver` 参数
-   * @en options passed to `resizeObserver`
-   */
-options?: ResizeObserverOptions) => () => void;
-
 /**
  * @title useScreenSafeArea
  * @returns 包含以下元素的元组：

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, useEffect, Dispatch, SetStateAction, useLayoutEffect } from 'react';
+import react__default, { DependencyList, MutableRefObject, EffectCallback, Dispatch, SetStateAction, RefObject, useEffect, useLayoutEffect } from 'react';
 import Cookies from 'js-cookie';
 import { DebounceSettings, ThrottleSettings, DebouncedFunc as DebouncedFunc$1 } from 'lodash-es';
 import * as lodash from 'lodash';
@@ -38,6 +38,10 @@ deps?: DependencyList) => void;
 
 declare const useAsyncEffect: UseAsyncEffect;
 
+type TargetValue<T> = T | undefined | null;
+type TargetType = HTMLElement | Element | Window | Document | EventTarget;
+type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
+
 /**
  * @title useClickOutside
  */
@@ -46,12 +50,17 @@ type UseClickOutside = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 监听函数
  * @en listener fucntion
  */
-handler: (evt: EventType) => void) => void;
+handler: (evt: EventType) => void, 
+/**
+ * @zh 监听函数是否生效
+ * @en whether the listener fucntion is enabled
+ */
+enabled?: boolean) => void;
 type EventType = MouseEvent | TouchEvent;
 
 declare const useClickOutside: UseClickOutside;
@@ -166,10 +175,6 @@ min?: number | null) => readonly [
 
 declare const useCounter: UseCounter;
 
-type TargetValue<T> = T | undefined | null;
-type TargetType = HTMLElement | Element | Window | Document | EventTarget;
-type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
-
 declare const defaultOptions: UseCssVarOptions;
 /**
  * @title useCssVar
@@ -414,7 +419,7 @@ interface UseDoubleClickProps {
      * @zh dom对象
      * @en dom element
      */
-    target: RefObject<Element>;
+    target: BasicTarget<Element>;
     /**
      * @zh 延迟时间（毫秒）
      * @en latency time (milliseconds)
@@ -448,22 +453,24 @@ interface Position {
  * - x
  * - y
  * - 元素是否在拖动中
+ * - 设置元素的位置
  * @returns_en A tuple with the following elements:
  * - x
  * - y
  * - Whether the element is being dragged
+ * set the element position
  */
 type UseDraggable = (
 /**
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
  * @zh 可选参数
  * @en optional params
  */
-options?: UseDraggableOptions) => readonly [number, number, boolean];
+options?: UseDraggableOptions) => readonly [number, number, boolean, Dispatch<SetStateAction<Position>>];
 /**
  * @title  UseDraggableOptions
  */
@@ -497,7 +504,7 @@ interface UseDraggableOptions {
      * @zh 设置拖拽容器边界
      * @defaultValue undefined
      */
-    containerElement?: RefObject<HTMLElement | SVGAElement>;
+    containerElement?: BasicTarget<HTMLElement | SVGAElement>;
     /**
      * @en Handle that triggers the drag event
      * @zh 触发拖动事件的dom元素
@@ -545,7 +552,7 @@ type UseDropZone = (
  * @zh 目标元素
  * @en target element
  */
-target: RefObject<EventTarget>, 
+target: BasicTarget<EventTarget>, 
 /**
    * @zh 拖拽释放时候的回调
    * @en drop callback
@@ -562,7 +569,7 @@ type UseElementBounding = (
  * @zh 目标元素
  * @en target element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -664,7 +671,7 @@ type UseElementSize = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh `resizeObserver` 参数
  * @en options passed to `resizeObserver`
@@ -687,7 +694,7 @@ type UseElementVisibility = (
    * @zh dom对象
    * @en dom element
    */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
    * @zh 传递给 `intersectionObserver` 的选项
    * @en options passed to `intersectionObserver`
@@ -868,7 +875,7 @@ type UseFocus = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
  * @zh 默认值
  * @en defaultValue
@@ -920,7 +927,7 @@ type UseFullscreen = (
  * @zh dom元素
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -996,7 +1003,17 @@ options?: Partial<PositionOptions>) => {
 
 declare const useGeolocation: UseGeolocation;
 
-declare const useHover: <T extends Element = HTMLDivElement>(target: RefObject<T>) => boolean;
+/**
+ * @title useHover
+ */
+type UseHover = <T extends Element = HTMLDivElement>(
+/**
+ * @zh dom对象
+ * @en dom element
+ */
+target: BasicTarget<T>) => boolean;
+
+declare const useHover: UseHover;
 
 /**
  * @title UseIdle
@@ -1045,7 +1062,7 @@ type UseScroll = (
  * @zh dom元素
  * @en dom elment
  */
-target: RefObject<Element> | Window | Document, 
+target: BasicTarget<Element> | Window | Document, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1162,7 +1179,7 @@ type UseInfiniteScroll = (
  * @zh dom元素
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 加载更多函数
  * @en load more function
@@ -1264,7 +1281,29 @@ interface UseInfiniteScrollDirection {
 
 declare const useInfiniteScroll: UseInfiniteScroll;
 
-declare const useIntersectionObserver: (target: RefObject<Element>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => () => void;
+/**
+ * @title useIntersectionObserver
+ * @returns 停止监听函数
+ * @returns_en stop listening function
+ */
+type UseIntersectionObserver = (
+/**
+ * @zh dom元素
+ * @en dom element
+ */
+target: BasicTarget<Element>, 
+/**
+ * @zh 回调
+ * @en callback
+ */
+callback: IntersectionObserverCallback, 
+/**
+ * @zh 传递给 `IntersectionObserver` 的参数
+ * @en options passed to `IntersectionObserver`
+ */
+options?: IntersectionObserverInit) => () => void;
+
+declare const useIntersectionObserver: UseIntersectionObserver;
 
 /**
  * @title useInterval
@@ -1457,7 +1496,7 @@ type UseMeasure = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1594,7 +1633,7 @@ type UseMousePressed = (
  * @zh dom对象
  * @en dom element
  */
-target?: RefObject<Element>, 
+target?: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1628,7 +1667,7 @@ interface UseMousePressedOptions {
  */
 type UseMousePressedSourceType = "mouse" | "touch" | null;
 
-declare const useMousePressed: (target?: RefObject<Element>, options?: UseMousePressedOptions) => readonly [boolean, UseMousePressedSourceType];
+declare const useMousePressed: UseMousePressed;
 
 /**
  * @title UseMutationObserver
@@ -1921,7 +1960,27 @@ declare const useRafState: <S>(initialState: S | (() => S)) => readonly [S, Disp
 
 declare const useReducedMotion: (defaultState?: boolean) => boolean;
 
-declare const useResizeObserver: (target: RefObject<Element>, callback: ResizeObserverCallback, options?: ResizeObserverOptions) => () => void;
+/**
+ * @title useResizeObserver
+ */
+type UseResizeObserver = (
+/**
+ * @zh dom元素
+ * @en dom element
+ */
+target: BasicTarget<Element>, 
+/**
+ * @zh 回调
+ * @en callback
+ */
+callback: ResizeObserverCallback, 
+/**
+   * @zh `resizeObserver` 参数
+   * @en options passed to `resizeObserver`
+   */
+options?: ResizeObserverOptions) => () => void;
+
+declare const useResizeObserver: UseResizeObserver;
 
 declare const useScreenSafeArea: () => readonly [string, string, string, string, lodash.DebouncedFunc<() => void>];
 
@@ -2567,38 +2626,6 @@ baseUrl?: string,
  */
 rel?: string) => void;
 
-/**
- * @title useHover
- */
-type UseHover = <T extends Element = HTMLDivElement>(
-/**
- * @zh dom对象
- * @en dom element
- */
-target: RefObject<T>) => boolean;
-
-/**
- * @title useIntersectionObserver
- * @returns 停止监听函数
- * @returns_en stop listening function
- */
-type UseIntersectionObserver = (
-/**
- * @zh dom元素
- * @en dom element
- */
-target: RefObject<Element>, 
-/**
- * @zh 回调
- * @en callback
- */
-callback: IntersectionObserverCallback, 
-/**
- * @zh 传递给 `IntersectionObserver` 的参数
- * @en options passed to `IntersectionObserver`
- */
-options?: IntersectionObserverInit) => () => void;
-
 /**
  * @title useLocalStorage
  * @returns 包含以下元素的元组：
@@ -2727,26 +2754,6 @@ type UseReducedMotion = (
  */
 defaultState?: boolean) => boolean;
 
-/**
- * @title useResizeObserver
- */
-type UseResizeObserver = (
-/**
- * @zh dom元素
- * @en dom element
- */
-target: RefObject<Element>, 
-/**
- * @zh 回调
- * @en callback
- */
-callback: ResizeObserverCallback, 
-/**
-   * @zh `resizeObserver` 参数
-   * @en options passed to `resizeObserver`
-   */
-options?: ResizeObserverOptions) => () => void;
-
 /**
  * @title useScreenSafeArea
  * @returns 包含以下元素的元组：

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, useEffect, Dispatch, SetStateAction, useLayoutEffect } from 'react';
+import react__default, { DependencyList, MutableRefObject, EffectCallback, Dispatch, SetStateAction, RefObject, useEffect, useLayoutEffect } from 'react';
 import Cookies from 'js-cookie';
 import { DebounceSettings, ThrottleSettings, DebouncedFunc as DebouncedFunc$1 } from 'lodash-es';
 import * as lodash from 'lodash';
@@ -38,6 +38,10 @@ deps?: DependencyList) => void;
 
 declare const useAsyncEffect: UseAsyncEffect;
 
+type TargetValue<T> = T | undefined | null;
+type TargetType = HTMLElement | Element | Window | Document | EventTarget;
+type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
+
 /**
  * @title useClickOutside
  */
@@ -46,12 +50,17 @@ type UseClickOutside = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 监听函数
  * @en listener fucntion
  */
-handler: (evt: EventType) => void) => void;
+handler: (evt: EventType) => void, 
+/**
+ * @zh 监听函数是否生效
+ * @en whether the listener fucntion is enabled
+ */
+enabled?: boolean) => void;
 type EventType = MouseEvent | TouchEvent;
 
 declare const useClickOutside: UseClickOutside;
@@ -166,10 +175,6 @@ min?: number | null) => readonly [
 
 declare const useCounter: UseCounter;
 
-type TargetValue<T> = T | undefined | null;
-type TargetType = HTMLElement | Element | Window | Document | EventTarget;
-type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
-
 declare const defaultOptions: UseCssVarOptions;
 /**
  * @title useCssVar
@@ -414,7 +419,7 @@ interface UseDoubleClickProps {
      * @zh dom对象
      * @en dom element
      */
-    target: RefObject<Element>;
+    target: BasicTarget<Element>;
     /**
      * @zh 延迟时间（毫秒）
      * @en latency time (milliseconds)
@@ -448,22 +453,24 @@ interface Position {
  * - x
  * - y
  * - 元素是否在拖动中
+ * - 设置元素的位置
  * @returns_en A tuple with the following elements:
  * - x
  * - y
  * - Whether the element is being dragged
+ * set the element position
  */
 type UseDraggable = (
 /**
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
  * @zh 可选参数
  * @en optional params
  */
-options?: UseDraggableOptions) => readonly [number, number, boolean];
+options?: UseDraggableOptions) => readonly [number, number, boolean, Dispatch<SetStateAction<Position>>];
 /**
  * @title  UseDraggableOptions
  */
@@ -497,7 +504,7 @@ interface UseDraggableOptions {
      * @zh 设置拖拽容器边界
      * @defaultValue undefined
      */
-    containerElement?: RefObject<HTMLElement | SVGAElement>;
+    containerElement?: BasicTarget<HTMLElement | SVGAElement>;
     /**
      * @en Handle that triggers the drag event
      * @zh 触发拖动事件的dom元素
@@ -545,7 +552,7 @@ type UseDropZone = (
  * @zh 目标元素
  * @en target element
  */
-target: RefObject<EventTarget>, 
+target: BasicTarget<EventTarget>, 
 /**
    * @zh 拖拽释放时候的回调
    * @en drop callback
@@ -562,7 +569,7 @@ type UseElementBounding = (
  * @zh 目标元素
  * @en target element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -664,7 +671,7 @@ type UseElementSize = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh `resizeObserver` 参数
  * @en options passed to `resizeObserver`
@@ -687,7 +694,7 @@ type UseElementVisibility = (
    * @zh dom对象
    * @en dom element
    */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
    * @zh 传递给 `intersectionObserver` 的选项
    * @en options passed to `intersectionObserver`
@@ -868,7 +875,7 @@ type UseFocus = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<HTMLElement | SVGElement>, 
+target: BasicTarget<HTMLElement | SVGElement>, 
 /**
  * @zh 默认值
  * @en defaultValue
@@ -920,7 +927,7 @@ type UseFullscreen = (
  * @zh dom元素
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -996,7 +1003,17 @@ options?: Partial<PositionOptions>) => {
 
 declare const useGeolocation: UseGeolocation;
 
-declare const useHover: <T extends Element = HTMLDivElement>(target: RefObject<T>) => boolean;
+/**
+ * @title useHover
+ */
+type UseHover = <T extends Element = HTMLDivElement>(
+/**
+ * @zh dom对象
+ * @en dom element
+ */
+target: BasicTarget<T>) => boolean;
+
+declare const useHover: UseHover;
 
 /**
  * @title UseIdle
@@ -1045,7 +1062,7 @@ type UseScroll = (
  * @zh dom元素
  * @en dom elment
  */
-target: RefObject<Element> | Window | Document, 
+target: BasicTarget<Element> | Window | Document, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1162,7 +1179,7 @@ type UseInfiniteScroll = (
  * @zh dom元素
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 加载更多函数
  * @en load more function
@@ -1264,7 +1281,29 @@ interface UseInfiniteScrollDirection {
 
 declare const useInfiniteScroll: UseInfiniteScroll;
 
-declare const useIntersectionObserver: (target: RefObject<Element>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => () => void;
+/**
+ * @title useIntersectionObserver
+ * @returns 停止监听函数
+ * @returns_en stop listening function
+ */
+type UseIntersectionObserver = (
+/**
+ * @zh dom元素
+ * @en dom element
+ */
+target: BasicTarget<Element>, 
+/**
+ * @zh 回调
+ * @en callback
+ */
+callback: IntersectionObserverCallback, 
+/**
+ * @zh 传递给 `IntersectionObserver` 的参数
+ * @en options passed to `IntersectionObserver`
+ */
+options?: IntersectionObserverInit) => () => void;
+
+declare const useIntersectionObserver: UseIntersectionObserver;
 
 /**
  * @title useInterval
@@ -1457,7 +1496,7 @@ type UseMeasure = (
  * @zh dom对象
  * @en dom element
  */
-target: RefObject<Element>, 
+target: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1594,7 +1633,7 @@ type UseMousePressed = (
  * @zh dom对象
  * @en dom element
  */
-target?: RefObject<Element>, 
+target?: BasicTarget<Element>, 
 /**
  * @zh 可选参数
  * @en optional params
@@ -1628,7 +1667,7 @@ interface UseMousePressedOptions {
  */
 type UseMousePressedSourceType = "mouse" | "touch" | null;
 
-declare const useMousePressed: (target?: RefObject<Element>, options?: UseMousePressedOptions) => readonly [boolean, UseMousePressedSourceType];
+declare const useMousePressed: UseMousePressed;
 
 /**
  * @title UseMutationObserver
@@ -1921,7 +1960,27 @@ declare const useRafState: <S>(initialState: S | (() => S)) => readonly [S, Disp
 
 declare const useReducedMotion: (defaultState?: boolean) => boolean;
 
-declare const useResizeObserver: (target: RefObject<Element>, callback: ResizeObserverCallback, options?: ResizeObserverOptions) => () => void;
+/**
+ * @title useResizeObserver
+ */
+type UseResizeObserver = (
+/**
+ * @zh dom元素
+ * @en dom element
+ */
+target: BasicTarget<Element>, 
+/**
+ * @zh 回调
+ * @en callback
+ */
+callback: ResizeObserverCallback, 
+/**
+   * @zh `resizeObserver` 参数
+   * @en options passed to `resizeObserver`
+   */
+options?: ResizeObserverOptions) => () => void;
+
+declare const useResizeObserver: UseResizeObserver;
 
 declare const useScreenSafeArea: () => readonly [string, string, string, string, lodash.DebouncedFunc<() => void>];
 
@@ -2567,38 +2626,6 @@ baseUrl?: string,
  */
 rel?: string) => void;
 
-/**
- * @title useHover
- */
-type UseHover = <T extends Element = HTMLDivElement>(
-/**
- * @zh dom对象
- * @en dom element
- */
-target: RefObject<T>) => boolean;
-
-/**
- * @title useIntersectionObserver
- * @returns 停止监听函数
- * @returns_en stop listening function
- */
-type UseIntersectionObserver = (
-/**
- * @zh dom元素
- * @en dom element
- */
-target: RefObject<Element>, 
-/**
- * @zh 回调
- * @en callback
- */
-callback: IntersectionObserverCallback, 
-/**
- * @zh 传递给 `IntersectionObserver` 的参数
- * @en options passed to `IntersectionObserver`
- */
-options?: IntersectionObserverInit) => () => void;
-
 /**
  * @title useLocalStorage
  * @returns 包含以下元素的元组：
@@ -2727,26 +2754,6 @@ type UseReducedMotion = (
  */
 defaultState?: boolean) => boolean;
 
-/**
- * @title useResizeObserver
- */
-type UseResizeObserver = (
-/**
- * @zh dom元素
- * @en dom element
- */
-target: RefObject<Element>, 
-/**
- * @zh 回调
- * @en callback
- */
-callback: ResizeObserverCallback, 
-/**
-   * @zh `resizeObserver` 参数
-   * @en options passed to `resizeObserver`
-   */
-options?: ResizeObserverOptions) => () => void;
-
 /**
  * @title useScreenSafeArea
  * @returns 包含以下元素的元组：

package/dist/index.mjs

@@ -174,10 +174,13 @@ const useAsyncEffect = (effect, cleanup = noop, deps)=>{
 const listerOptions = {
     passive: true
 };
-const useClickOutside = (target, handler)=>{
+const useClickOutside = (target, handler, enabled = true)=>{
     const savedHandler = useLatest(handler);
     const listener = (event)=>{
-        const element = target.current;
+        if (!enabled) {
+            return;
+        }
+        const element = getTargetElement(target);
         if (!element) {
             return;
         }
@@ -815,19 +818,19 @@ const useDraggable = (target, options = {})=>{
     };
     const start = (e)=>{
         var _container_getBoundingClientRect;
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!filterEvent(e) || !element) {
             return;
         }
         if (options.exact && e.target !== element) {
             return;
         }
-        const container = containerElement == null ? void 0 : containerElement.current;
+        const container = getTargetElement(containerElement);
         const containerRect = container == null ? void 0 : (_container_getBoundingClientRect = container.getBoundingClientRect) == null ? void 0 : _container_getBoundingClientRect.call(container);
         const targetRect = element.getBoundingClientRect();
         const pos = {
-            x: e.clientX - (container ? targetRect.left - containerRect.left + container.scrollLeft : targetRect.left),
-            y: e.clientY - (container ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
+            x: e.clientX - (container && containerRect ? targetRect.left - (containerRect == null ? void 0 : containerRect.left) + container.scrollLeft : targetRect.left),
+            y: e.clientY - (container && containerRect ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
         };
         if ((options.onStart == null ? void 0 : options.onStart.call(options, pos, e)) === false) {
             return;
@@ -836,14 +839,14 @@ const useDraggable = (target, options = {})=>{
         handleEvent(e);
     };
     const move = (e)=>{
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!filterEvent(e) || !element) {
             return;
         }
         if (!pressedDelta) {
             return;
         }
-        const container = containerElement == null ? void 0 : containerElement.current;
+        const container = getTargetElement(containerElement);
         const targetRect = element.getBoundingClientRect();
         let { x, y } = position;
         x = e.clientX - pressedDelta.x;
@@ -878,7 +881,8 @@ const useDraggable = (target, options = {})=>{
     return [
         position.x,
         position.y,
-        !!pressedDelta
+        !!pressedDelta,
+        setPositon
     ];
 };
 
@@ -921,7 +925,7 @@ const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!element) {
             return;
         }
@@ -948,7 +952,7 @@ const useElementBounding = (target, options = defaultOptions$1)=>{
     const [x, setX] = useState(0);
     const [y, setY] = useState(0);
     const update = useEvent(()=>{
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!element) {
             if (reset) {
                 setHeight(0);
@@ -1048,7 +1052,7 @@ const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = target.current;
+        const element = getTargetElement(target);
         if (!element) {
             return;
         }
@@ -2069,7 +2073,7 @@ const useMousePressed = (target, options = defaultOptions$1)=>{
     const { touch = true, drag = true, initialValue = false } = options;
     const [pressed, setPressed] = useState(initialValue);
     const [sourceType, setSourceType] = useState(null);
-    const element = target == null ? void 0 : target.current;
+    const element = getTargetElement(target);
     const onPressed = useCallback((srcType)=>()=>{
             setPressed(true);
             setSourceType(srcType);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "5.0.5",
+  "version": "5.0.7",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {