@siberiacancode/reactuse 0.2.34 → 0.3.0

package/dist/types/hooks/sensors.d.ts

@@ -28,6 +28,7 @@ export * from './useScroll/useScroll';
 export * from './useScrollIntoView/useScrollIntoView';
 export * from './useScrollTo/useScrollTo';
 export * from './useTextSelection/useTextSelection';
+export * from './useVisibility/useVisibility';
 export * from './useWindowEvent/useWindowEvent';
 export * from './useWindowFocus/useWindowFocus';
 export * from './useWindowScroll/useWindowScroll';

package/dist/types/hooks/useDeviceMotion/useDeviceMotion.d.ts

@@ -4,13 +4,17 @@ export interface UseDeviceMotionReturn {
     interval: DeviceMotionEvent['interval'];
     rotationRate: DeviceMotionEventRotationRate;
 }
-export interface UseDeviceMotionParams {
+export interface UseDeviceMotionOptions {
     /** The delay in milliseconds */
     delay?: number;
     /** Whether to enable the hook */
     enabled?: boolean;
     /** The callback function to be invoked */
-    callback?: (event: DeviceMotionEvent) => void;
+    onChange?: (event: DeviceMotionEvent) => void;
+}
+export interface UseDeviceMotion {
+    (callback?: (event: DeviceMotionEvent) => void, delay?: number): UseDeviceMotionReturn;
+    (options?: UseDeviceMotionOptions): UseDeviceMotionReturn;
 }
 /**
  * @name useDeviceMotion
@@ -20,12 +24,29 @@ export interface UseDeviceMotionParams {
  *
  * @browserapi DeviceMotionEvent https://developer.mozilla.org/en-US/docs/Web/API/Window/DeviceMotionEvent
  *
+ * @overload
  * @param {number} [delay=1000] The delay in milliseconds
  * @param {(event: DeviceMotionEvent) => void} [callback] The callback function to be invoked
- * @param {boolean} [enabled=true] Whether to enable the hook
+ * @returns {UseDeviceMotionReturn} The device motion data and interval
+ *
+ * @example
+ * const { interval, rotationRate, acceleration, accelerationIncludingGravity } = useDeviceMotion(500, (event) => console.log(event));
+ *
+ * @overload
+ * @param {(event: DeviceMotionEvent) => void} [callback] The callback function to be invoked
+ * @returns {UseDeviceMotionReturn} The device motion data and interval
+ *
+ * @example
+ * const { interval, rotationRate, acceleration, accelerationIncludingGravity } = useDeviceMotion((event) => console.log(event));
+ *
+ * @overload
+ * @param {UseDeviceMotionOptions} [options] Configuration options
+ * @param {number} [options.delay] The delay in milliseconds
+ * @param {boolean} [options.enabled] Whether to enable the hook
+ * @param {(event: DeviceMotionEvent) => void} [options.onChange] The callback function to be invoked
  * @returns {UseDeviceMotionReturn} The device motion data and interval
  *
  * @example
  * const { interval, rotationRate, acceleration, accelerationIncludingGravity } = useDeviceMotion();
  */
-export declare const useDeviceMotion: (params?: UseDeviceMotionParams) => UseDeviceMotionReturn;
+export declare const useDeviceMotion: UseDeviceMotion;

package/dist/types/hooks/useFocusTrap/useFocusTrap.d.ts

@@ -1,5 +1,6 @@
 import { HookTarget } from '../../utils/helpers';
 import { StateRef } from '../useRefState/useRefState';
+export declare const FOCUS_SELECTOR = "a, input, select, textarea, button, object, [tabindex]";
 /** The use focus trap return type */
 export interface UseFocusTrapReturn {
     /** Whether focus trap is active */

package/dist/types/hooks/useHash/useHash.d.ts

@@ -12,7 +12,9 @@ export interface UseHashOptions {
 type UseHashReturn = [string, (value: string) => void];
 export interface UseHash {
     (initialValue?: string, options?: UseHashOptions): UseHashReturn;
+    (options?: UseHashOptions): UseHashReturn;
     (initialValue?: string, callback?: (hash: string) => void): UseHashReturn;
+    (callback?: (hash: string) => void): UseHashReturn;
 }
 /**
  * @name useHash
@@ -41,7 +43,7 @@ export interface UseHash {
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
  *
  * @example
- * const [hash, setHash] = useHash("initial", (newHash) => console.log('Hash changed:', newHash));
+ * const [hash, setHash] = useHash("initial", (newHash) => console.log('callback'));
  */
 export declare const useHash: UseHash;
 export {};

package/dist/types/hooks/useIntersectionObserver/useIntersectionObserver.d.ts

@@ -1,9 +1,9 @@
 import { HookTarget } from '../../utils/helpers';
 import { StateRef } from '../useRefState/useRefState';
 /** The intersection observer callback type */
-export type UseIntersectionObserverCallback = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
+export type UseIntersectionObserverCallback = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void;
 /** The intersection observer options type */
-export interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, "root"> {
+export interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {
     /** The enabled state of the intersection observer */
     enabled?: boolean;
     /** The callback to execute when intersection is detected */
@@ -14,9 +14,7 @@ export interface UseIntersectionObserverOptions extends Omit<IntersectionObserve
 /** The intersection observer return type */
 export interface UseIntersectionObserverReturn {
     /** The intersection observer entry */
-    entry?: IntersectionObserverEntry;
-    /** The in view state of the intersection observer */
-    inView: boolean;
+    entries?: IntersectionObserverEntry[];
     /** The intersection observer instance */
     observer?: IntersectionObserver;
 }
@@ -46,7 +44,7 @@ export interface UseIntersectionObserver {
  * @returns {UseIntersectionObserverReturn} An object containing the state
  *
  * @example
- * const { ref, entry, inView, observer } = useIntersectionObserver();
+ * const { ref, entries, observer } = useIntersectionObserver();
  *
  * @overload
  * @template Target The target element
@@ -56,7 +54,7 @@ export interface UseIntersectionObserver {
  * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
  *
  * @example
- * const { entry, inView, observer } = useIntersectionObserver(ref);
+ * const { entries, observer } = useIntersectionObserver(ref);
  *
  * @overload
  * @template Target The target element
@@ -64,7 +62,7 @@ export interface UseIntersectionObserver {
  * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
  *
  * @example
- * const { ref, entry, inView, observer } = useIntersectionObserver(() => console.log('callback'));
+ * const { ref, entries, observer } = useIntersectionObserver(() => console.log('callback'));
  *
  * @overload
  * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected
@@ -72,6 +70,6 @@ export interface UseIntersectionObserver {
  * @returns {UseIntersectionObserverReturn} An object containing the state
  *
  * @example
- * const { entry, inView, observer } = useIntersectionObserver(() => console.log('callback'), ref);
+ * const { entries, observer } = useIntersectionObserver(ref, () => console.log('callback'));
  */
 export declare const useIntersectionObserver: UseIntersectionObserver;

package/dist/types/hooks/useVisibility/useVisibility.d.ts

@@ -0,0 +1,77 @@
+import { HookTarget } from '../../utils/helpers';
+import { StateRef } from '../useRefState/useRefState';
+/** The visibility callback type */
+export type UseVisibilityCallback = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
+/** The visibility options type */
+export interface UseVisibilityOptions extends Omit<IntersectionObserverInit, 'root'> {
+    /** The enabled state of the intersection */
+    enabled?: boolean;
+    /** The callback to execute when intersection is detected */
+    onChange?: UseVisibilityCallback;
+    /** The root element to observe */
+    root?: HookTarget;
+}
+/** The intersection observer return type */
+export interface UseVisibilityReturn {
+    /** The intersection observer entry */
+    entry?: IntersectionObserverEntry;
+    /** The intersection observer in view */
+    inView?: boolean;
+    /** The intersection observer instance */
+    observer?: IntersectionObserver;
+}
+export interface UseVisibility {
+    <Target extends Element>(options?: UseVisibilityOptions, target?: never): UseVisibilityReturn & {
+        ref: StateRef<Target>;
+    };
+    (target: HookTarget, options?: UseVisibilityOptions): UseVisibilityReturn;
+    <Target extends Element>(callback: UseVisibilityCallback, target?: never): UseVisibilityReturn & {
+        ref: StateRef<Target>;
+    };
+    (target: HookTarget, callback: UseVisibilityCallback): UseVisibilityReturn;
+}
+/**
+ * @name useVisibility
+ * @description - Hook that gives you visibility observer state
+ * @category Sensors
+ * @usage medium
+ *
+ * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
+ *
+ * @overload
+ * @param {HookTarget} target The target element to detect intersection
+ * @param {boolean} [options.enabled=true] The Intersection options
+ * @param {((entries: IntersectionEntry[], observer: Intersection) => void) | undefined} [options.onChange] The callback to execute when intersection is detected
+ * @param {HookTarget} [options.root=document] The root element to observe
+ * @returns {UseVisibilityReturn} An object containing the state
+ *
+ * @example
+ * const { ref, entries, observer } = useVisibility();
+ *
+ * @overload
+ * @template Target The target element
+ * @param {boolean} [options.enabled=true] The Intersection options
+ * @param {((entries: IntersectionEntry[], observer: Intersection) => void) | undefined} [options.onChange] The callback to execute when intersection is detected
+ * @param {HookTarget} [options.root=document] The root element to observe
+ * @returns {UseVisibilityReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
+ *
+ * @example
+ * const { entries, observer } = useVisibility(ref);
+ *
+ * @overload
+ * @template Target The target element
+ * @param {UseVisibilityCallback} callback The callback to execute when intersection is detected
+ * @returns {UseVisibilityReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
+ *
+ * @example
+ * const { ref, entries, observer } = useVisibility(() => console.log('callback'));
+ *
+ * @overload
+ * @param {UseVisibilityCallback} callback The callback to execute when intersection is detected
+ * @param {HookTarget} target The target element to detect intersection
+ * @returns {UseVisibilityReturn} An object containing the state
+ *
+ * @example
+ * const { entries, observer } = useVisibility(ref, () => console.log('callback'));
+ */
+export declare const useVisibility: UseVisibility;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siberiacancode/reactuse",
-  "version": "0.2.34",
+  "version": "0.3.0",
   "description": "The ultimate collection of react hooks",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",