@siberiacancode/reactuse 0.2.35 → 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/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/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.35",
+  "version": "0.3.0",
   "description": "The ultimate collection of react hooks",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",