import { RefObject, SyntheticEvent, KeyboardEvent as KeyboardEvent$1, RefCallback } from 'react'; import { A as ArrayMinLength1 } from './react-tools.Ozx07lAu.js'; /** * Detailed information about a single screen, extending the standard `Screen` interface * with additional properties available via the Window Management API. */ interface ScreenDetail extends Omit { /** * X-coordinate (left edge) of the available screen area — the area not occupied by * the OS taskbar or dock. `undefined` when not available. */ readonly availLeft: number | undefined; /** * Y-coordinate (top edge) of the available screen area. * `undefined` when not available. */ readonly availTop: number | undefined; /** * Ratio of physical pixels to CSS pixels for this screen. * Higher values indicate high-DPI / Retina displays. * `undefined` when not available via the Window Management API. */ readonly devicePixelRatio: number | undefined; /** * `true` when this is a built-in screen (e.g. laptop display). * `false` for external monitors. `undefined` when not available. */ readonly isInternal: boolean | undefined; /** * `true` when this is the operating system's primary/main screen. * `undefined` when not available via the Window Management API. */ readonly isPrimary: boolean | undefined; /** * Human-readable label for the screen as reported by the OS * (e.g. `"Built-in Retina Display"`, `"LG UltraWide"`). * `undefined` when not available. */ readonly label: string | undefined; /** * X-coordinate (left edge) of the total screen area in the multi-screen coordinate space. * `undefined` when the Window Management API is not available. */ readonly left: number | undefined; /** * Y-coordinate (top edge) of the total screen area in the multi-screen coordinate space. * `undefined` when the Window Management API is not available. */ readonly top: number | undefined; /** Current orientation of the screen, including type and angle. */ readonly orientation: { /** * Current orientation type. * One of `"portrait-primary"`, `"portrait-secondary"`, * `"landscape-primary"`, or `"landscape-secondary"`. */ type: OrientationType; /** * Current orientation angle in degrees (`0`, `90`, `180`, or `270`). * `0` corresponds to the natural orientation of the device. */ angle: number; }; } /** * Aggregated screen information returned by [useScreen](https://react-tools.ndria.dev/hooks/events/useScreen). */ interface ScreenDetails { /** Details of the screen currently displaying the browser window. */ readonly currentScreen: ScreenDetail; /** * Details of all screens connected to the device. * `undefined` when the Window Management API is unavailable or permission was denied. */ readonly screens: ScreenDetail[] | undefined; } /** * Internal interface extending `ScreenDetails` for the Window Management API event target. * @internal */ interface ScreenDetailsEvt extends ScreenDetails, EventTarget { /** Called when the current screen changes (e.g. window moved to another display). */ oncurrentscreenchange: ((evt: Event) => void) | null; /** Called when the set of available screens changes (monitor connected/disconnected). */ onscreenschange: ((evt: Event) => void) | null; } /** * Screen orientation lock type supported by the Screen Orientation API. * Pass one of these values to the `lockOrientation` function returned by [useScreen](https://react-tools.ndria.dev/hooks/events/useScreen). */ type OrientationLockType = "any" | "natural" | "landscape" | "portrait" | "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary"; /** * Parameters accepted by [useScreen](https://react-tools.ndria.dev/hooks/events/useScreen). */ type UseScreenProps = { /** * When `true`, the hook requests access to the full multi-screen details via the * [Window Management API](https://developer.mozilla.org/en-US/docs/Web/API/Window_Management_API), * populating per-screen properties such as `availLeft`, `availTop`, `left`, `top`, * `devicePixelRatio`, `isInternal`, `isPrimary`, and `label` for each screen. * Requires the `"window-management"` permission to be granted. * When `false` or omitted, only the standard `screen` properties are populated * and multi-screen fields are `undefined`. */ allScreen?: boolean; }; /** * Return value of [useScreen](https://react-tools.ndria.dev/hooks/events/useScreen). */ type UseScreenResult = [ /** * A reactive snapshot of the current screen details. Includes standard * `screen` properties (`width`, `height`, `availWidth`, `availHeight`, * `colorDepth`, `pixelDepth`, `orientation`) on `currentScreen`, plus * extended per-screen properties when `allScreen` is `true` and the * Window Management API is available. */ ScreenDetails, /** * Requests a screen orientation lock, constraining the device to the specified * {@link OrientationLockType} (e.g. `"portrait-primary"`, `"landscape"`). * Resolves when the lock is acquired. Rejects if the browser does not support * orientation locking or if the request is denied. */ (orientation: OrientationLockType) => Promise, /** * Releases the current orientation lock, allowing the device to rotate freely * again. No-op if no lock is currently held. */ () => void ]; /** * Parameters accepted by [usePointerLock](https://react-tools.ndria.dev/hooks/events/usePointerLock). * * @template T - The `HTMLElement` subtype that the pointer lock is requested on. */ interface UsePointerLockProps { /** * The element on which pointer lock is requested. Accepts either a React * `RefObject` or a direct element reference. */ target: RefObject | T; /** * When `true`, requests unadjusted pointer movement (i.e. raw hardware input * without OS-level pointer acceleration). Not supported in all browsers — * falls back silently when unavailable. */ unadjustedMovement?: boolean; /** * Called when the pointer lock is successfully acquired. Receives the currently * locked element as reported by `document.pointerLockElement`. */ onLock?: (target: T) => void; /** * Called when the pointer lock is released, either programmatically or by the * user pressing `Escape`. */ onUnlock?: (target: T) => void; /** * Called when the pointer lock request fails (e.g. the element is not focusable, * or the user denied the request). Receives the error thrown by the browser. */ onError: (err: unknown) => void; } /** * Result object returned by [usePointerLock](https://react-tools.ndria.dev/hooks/events/usePointerLock). */ interface UsePointerLockResult { /** Request the pointer lock on the `target` element. Returns a `Promise` that resolves when granted. */ lock: () => Promise; /** Release the pointer lock. Triggers `onUnlock` if the lock was held. */ unlock: () => void; } /** * Detected swipe direction returned by [useSwipe](https://react-tools.ndria.dev/hooks/events/useSwipe) callbacks. * - `"up"` / `"down"` — vertical swipes. * - `"left"` / `"right"` — horizontal swipes. * - `"none"` — movement below the `threshold`, not classified as a swipe. */ type SwipeDirection = "up" | "right" | "down" | "left" | "none"; /** * Props for the [useSwipe](https://react-tools.ndria.dev/hooks/events/useSwipe) hook. */ interface UseSwipeProps { /** The element to attach swipe detection to. Accepts a `RefObject` or a direct element reference. */ target: RefObject | Element; /** Called when a swipe gesture begins (first `pointerdown` / `touchstart`). */ onSwipeStart?: (e: MouseEvent | TouchEvent) => void; /** * Called during an active swipe gesture on each move event. * @param e - The underlying `MouseEvent` or `TouchEvent`. * @param direction - The current swipe direction (may be `"none"` if below threshold). * @param delta - Accumulated `x` and `y` displacement since the gesture started. */ onSwipe?: (e: MouseEvent | TouchEvent, direction: SwipeDirection, delta: { x: number; y: number; }) => void; /** * Called when the swipe gesture ends (pointer released / `touchend`). * @param e - The underlying `MouseEvent` or `TouchEvent`. * @param direction - Final swipe direction. * @param delta - Total `x` and `y` displacement of the gesture. */ onSwipeEnd?: (e: MouseEvent | TouchEvent, direction: SwipeDirection, delta: { x: number; y: number; }) => void; /** Listener and gesture threshold configuration. */ options?: { /** * When `true`, the event listener is registered as passive, preventing the hook * from calling `preventDefault`. Improves scroll performance on mobile. * @default false */ passive?: boolean; /** * Minimum displacement in pixels in either axis required for a movement to be * classified as a swipe direction. Movements below this value return `"none"`. * @default 0 */ threshold?: number; }; } /** * The function returned by [useSwipe](https://react-tools.ndria.dev/hooks/events/useSwipe) that stops all swipe event listeners. * Call it to manually clean up before unmount if needed. */ interface UseSwipeResult { (): void; } /** * Parameters accepted by [useBeforeUnload](https://react-tools.ndria.dev/hooks/events/useBeforeUnload). */ type UseBeforeUnloadProps = { /** * The target on which the `beforeunload` event listener is registered. Accepts * either a React `RefObject` or a direct `Window` reference. * When omitted, the listener is attached to the global `window` object. */ element?: RefObject | Window; /** * The event handler invoked when the `beforeunload` event fires. Receives the * native {@link BeforeUnloadEvent}. To trigger the browser's built-in leave * confirmation dialog, call `evt.preventDefault()` inside this handler (the * `returnValue` approach is deprecated in modern browsers). */ listener: (evt: BeforeUnloadEvent) => void; /** * Options forwarded to `addEventListener` as the third argument. Accepts either * a boolean shorthand for `capture` or a full {@link AddEventListenerOptions} * object. When omitted, the listener is registered with the browser defaults * (bubble phase, non-passive, non-once). */ opts?: boolean | AddEventListenerOptions; }; /** * Return value of [useBeforeUnload](https://react-tools.ndria.dev/hooks/events/useBeforeUnload). * * A stable cleanup function that manually removes the `beforeunload` listener from * the target element. Calling it is optional — the hook removes the listener * automatically on unmount — but it can be useful to detach the listener earlier * in response to a user action (e.g. after a successful save that makes the warning * unnecessary). */ type UseBeforeUnloadResult = () => void; /** * Parameters accepted by [useClickOutside](https://react-tools.ndria.dev/hooks/events/useClickOutside). */ type UseClickOutsideProps = { /** * The element to monitor. Accepts either a React `RefObject` or a * direct `HTMLElement` reference. Click events originating inside this element * (or on the element itself) are ignored; only clicks outside it trigger `handler`. */ target: RefObject | HTMLElement; /** * Callback invoked whenever a click event is detected outside the `target` element. * Receives the native {@link Event} that triggered the outside-click detection. */ handler: (evt: Event) => void; }; /** * Parameters accepted by [useContextMenu](https://react-tools.ndria.dev/hooks/events/useContextMenu). */ type UseContextMenuProps = { /** * The target on which the context menu event listener is registered. Accepts * either a React `RefObject` or a direct `Window` reference. */ element: RefObject | Window; /** * Callback invoked when the context menu event fires on the target element. * Receives the native {@link PointerEvent} that triggered the context menu. * May return a `Promise` for async handlers. */ listener: (evt: PointerEvent) => void | Promise; /** * Controls which React effect hook is used to register the event listener: * - **`"normal"`** *(default)* — Uses `useEffect`, which runs asynchronously * after the browser has painted. * - **`"layout"`** — Uses `useLayoutEffect`, which runs synchronously after * DOM mutations but before the browser paints. Prefer this when the listener * needs to read or modify layout immediately. */ effectType?: "normal" | "layout"; /** * Options forwarded to `addEventListener` as the third argument. Accepts either * a boolean shorthand for `capture` or a full {@link AddEventListenerOptions} * object. When omitted, the listener is registered with the browser defaults. */ listenerOpts?: boolean | AddEventListenerOptions; }; /** * Parameters accepted by [useDoubleClick](https://react-tools.ndria.dev/hooks/events/useDoubleClick). * * @template T - The element type the synthetic event originates from. * @template E - The underlying native event type. */ type UseDoubleClickProps = ((evt: SyntheticEvent) => Promise | void) | { /** * Handler invoked when a double-click gesture is detected within the * configured `tolerance` window. */ doubleClick: (evt: SyntheticEvent) => Promise | void; /** * Optional handler invoked when a single click is detected and no second * click follows within the `tolerance` window. When omitted, single clicks * are ignored. */ singleClick?: (evt: SyntheticEvent) => Promise | void; /** * Maximum number of milliseconds allowed between two clicks for them to be * considered a double-click. Defaults to `300` ms when omitted. */ tolerance?: number; }; /** * Return value of [useDoubleClick](https://react-tools.ndria.dev/hooks/events/useDoubleClick). * * A stable event handler to attach to a React element's `onClick` (or equivalent) * prop. Internally debounces clicks and dispatches to either `singleClick` or * `doubleClick` based on the configured `tolerance`. * * @template T - The element type the synthetic event originates from. * @template E - The underlying native event type. */ type UseDoubleClickResult = (evt: SyntheticEvent) => Promise | void; /** * Parameters accepted by [useEventDispatcher](https://react-tools.ndria.dev/hooks/events/useEventDispatcher). * * The single argument is the target on which events will be dispatched. * Accepts either a React `RefObject` or a direct `Window` reference. * Defaults to the global `window` when omitted. */ type UseEventDispatcherProps = RefObject | Window; /** * Return value of [useEventDispatcher](https://react-tools.ndria.dev/hooks/events/useEventDispatcher). * * A stable function that dispatches the provided {@link Event} or * {@link CustomEvent} on the configured target element. */ type UseEventDispatcherResult = (evt: Event | CustomEvent) => void; /** * Return value of [useEvents](https://react-tools.ndria.dev/hooks/events/useEvents). * * A tuple of two functions for listening to and dispatching events on the * global `window` object. * * @template T - The type of the `detail` payload carried by {@link CustomEvent} instances. Defaults to `unknown` when not specified. */ type UseEventsResult = [ /** * Registers an event listener on the global `window` object for the given * event type. Returns a cleanup function that removes the listener when called. * * @param type - The event type string to listen for (e.g. `"click"`). * @param callback - The handler invoked when the event fires. Receives the * native {@link Event} or a {@link CustomEvent} whose `detail` is typed as * `T`. * @param options - Options forwarded to `addEventListener` as the third * argument. Accepts either a boolean shorthand for `capture` or a full * {@link AddEventListenerOptions} object. * @returns A cleanup function that removes the registered listener when called. */ (type: string, callback: (evt: Event | CustomEvent) => void, options?: boolean | AddEventListenerOptions) => () => void, /** * Dispatches the provided {@link Event} or {@link CustomEvent} on the global * `window` object, synchronously invoking all matching listeners registered * via the first tuple entry. * * @param evt - The event to dispatch. */ (evt: Event | CustomEvent) => void ]; /** * Parameters accepted by [useHotKeys](https://react-tools.ndria.dev/hooks/events/useHotKeys). */ type UseHotKeysProps = { /** * The keyboard shortcut string to listen for. Supports the following formats: * - A bare key string (e.g. `"s"`, `"Enter"`). * - A single modifier combined with a key using `+` (e.g. `"ctrl+s"`). * - Two modifiers combined with a key using `+` (e.g. `"ctrl+shift+z"`). * * Supported modifiers: `"alt"`, `"ctrl"`, `"meta"`, `"shift"`, `"ctrlCommand"` * (maps to `ctrl` on Windows/Linux and `meta` on macOS). */ hotKey: `${string}` | `${"alt" | "ctrl" | "meta" | "shift" | "ctrlCommand"}+${string}` | `${"alt" | "ctrl" | "meta" | "shift" | "ctrlCommand"}+${"alt" | "ctrl" | "meta" | "shift" | "ctrlCommand"}+${string}`; /** * The keyboard event type to listen for. * - **`"keydown"`** *(default)* — Fires when the key is pressed. * - **`"keyup"`** — Fires when the key is released. */ type?: "keydown" | "keyup"; /** * The target on which the keyboard event listener is registered. Accepts either * a React `RefObject` or a direct `Window` reference. * Defaults to `window` when omitted. */ target?: RefObject | Window; /** * Callback invoked when the configured hotkey combination is detected. Receives * the native {@link KeyboardEvent} or a {@link KeyEvt} for element-scoped targets. * May return a `Promise` for async handlers. */ listener: (evt: KeyboardEvent | KeyboardEvent$1) => void | Promise; /** * Options forwarded to `addEventListener` as the third argument. Accepts either * a boolean shorthand for `capture` or a full {@link AddEventListenerOptions} * object. When omitted, the listener is registered with the browser defaults. */ listenerOpts?: boolean | AddEventListenerOptions; }; /** * Return value of [useHotKeys](https://react-tools.ndria.dev/hooks/events/useHotKeys). * * A stable cleanup function that manually removes the keyboard event listener from * the target. Calling it is optional — the hook cleans up automatically on unmount * — but useful to detach the listener earlier on demand. */ type UseHotKeysResult = () => void; /** * Parameters accepted by [useHover](https://react-tools.ndria.dev/hooks/events/useHover). */ type UseHoverProps = { /** * The element to monitor for hover state. Accepts either a React * `RefObject` or a direct `HTMLElement` reference. */ target: RefObject | HTMLElement; /** * Optional configuration for event callbacks and return value behaviour. */ opts?: UseHoverOptions; }; /** * Options accepted by [useHover](https://react-tools.ndria.dev/hooks/events/useHover). */ type UseHoverOptions = { /** * Called when the pointer enters the target element (`pointerenter` event). */ onEnter?: (evt: Event) => void; /** * Called whenever the hover state changes. Receives `true` when the pointer * enters and `false` when it leaves. */ onChange?: (isHover: boolean) => void; /** * Called when the pointer leaves the target element (`pointerleave` event). */ onLeave?: (evt: Event) => void; /** * Controls whether the hook returns the current hover state as a boolean: * - **`true`** — The hook returns a reactive `boolean` that is `true` while * the pointer is over the target and `false` otherwise. * - **`false`** *(default)* — The hook returns `void`. Use this when you only * need the callbacks and want to avoid unnecessary re-renders. */ returnValue?: boolean; }; /** * Props accepted by [useInfiniteScroll](https://react-tools.ndria.dev/hooks/events/useInfiniteScroll). * * @template T - The type of the data returned by each page request. * @template E - The scrollable container element type, extending {@link Element}. */ interface UseInfiniteScrollProps { /** * An async function that fetches the next page of data. Receives the * accumulated result of all previous requests as an optional argument, * enabling cursor-based or offset-based pagination strategies. The resolved * value is stored as the new `data` in {@link UseInfiniteScrollResult}. */ request: (data?: T) => Promise; /** * A React `RefObject` attached to the scrollable container element to * monitor. When the user scrolls within `threshold` pixels of the bottom * of this element, the next page request is triggered automatically. */ ref: RefObject; /** * A predicate called after each successful request to determine whether * more pages are available. Receives the latest resolved data and should * return `true` to allow further requests, or `false` to stop automatic * fetching and set `fullData` to `true` in {@link UseInfiniteScrollResult}. */ hasMoreData: (data?: T) => boolean; /** * Distance in pixels from the bottom of the scrollable container at which * the next page request is triggered. A value of `0` fires the request * exactly when the bottom is reached; higher values trigger it earlier. * * @default 0 */ threshold?: number; /** * Called synchronously before each page request begins. Use this to show * a custom loading indicator or perform any pre-request side effects. */ onBefore?: () => void; /** * Called after each successful page request. Use this to hide a loading * indicator or perform any post-request side effects. */ onSuccess?: () => void; /** * Called when a page request throws an error. Receives the thrown value, * which may be an `Error` or any other type depending on the `request` * implementation. When omitted, errors are silently swallowed. */ onError?: (err: unknown) => void; } /** * Return value of {@link useInfiniteScroll}. * * @template T - The type of the data returned by each page request. */ interface UseInfiniteScrollResult { /** * The data returned by the most recent successful `request` call. * `undefined` before the first page has loaded. */ data: T | undefined; /** * `true` while a `request` call is currently in-flight, `false` otherwise. * Use this to render a loading indicator. */ loading: boolean; /** * `true` when `hasMoreData` returned `false` after the most recent request, * indicating that all available pages have been loaded and no further * automatic requests will be triggered. */ fullData: boolean; /** * Imperatively updates the current `data` without triggering a new `request` * call. Accepts either a direct replacement value of type `T` or an updater * function that receives the current data and returns the next value. Useful * for optimistic updates or local mutations. */ updateData: (data: T | ((currentState?: T) => T)) => void; /** * Manually triggers the next page request using the same logic as the * automatic scroll-triggered fetch. Resolves when the request completes, * regardless of success or failure. */ loadData: () => Promise; } /** * Parameters accepted by [useIntersectionObserver](https://react-tools.ndria.dev/hooks/events/useIntersectionObserver). * * @template T - The element type observed by the {@link IntersectionObserver}. */ type UseIntersectionObserverProps = { /** * The {@link IntersectionObserverCallback} invoked whenever the observed * element's intersection with the viewport (or a configured root) changes. * Receives the array of {@link IntersectionObserverEntry} objects and the * observer instance itself. */ cb: IntersectionObserverCallback; /** * Controls how the target element is attached to the observer: * - **`{ mode: "ref" }`** — The hook returns a `RefCallback` to attach directly * to the JSX element. The observer is connected when the ref is set. * - **`{ mode: "effect", targetRef }`** — The observer is connected inside a * `useEffect` using the provided `RefObject`. * - **`{ mode: "layout-effect", targetRef }`** — The observer is connected * inside a `useLayoutEffect` using the provided `RefObject`, running * synchronously before the browser paints. */ attachOptions: { mode: "ref"; targetRef?: never; } | { mode: "effect" | "layout-effect"; targetRef: RefObject; }; /** * Options forwarded to the {@link IntersectionObserver} constructor. Controls * the `root`, `rootMargin`, and `threshold` used when calculating intersections. * When omitted, the observer uses the viewport with default margins and a * threshold of `0`. */ opts?: IntersectionObserverInit; }; /** * Return value of [useIntersectionObserver](https://react-tools.ndria.dev/hooks/events/useIntersectionObserver). * * @template T - The element type observed by the {@link IntersectionObserver}. */ type UseIntersectionObserverResult = { /** * A React ref callback to attach to the target element. Only populated when * `attachOptions.mode` is `"ref"` — `null` in `"effect"` and `"layout-effect"` * modes where the target is provided via `targetRef` instead. */ ref: RefCallback | null; /** * Disconnects the observer, stopping all intersection notifications. The observer * can be restarted by calling {@link UseIntersectionObserverResult.reconnect}. */ disconnect: () => void; /** * Reconnects the observer after it has been disconnected, resuming intersection * notifications for the target element. */ reconnect: () => void; }; /** * Callback type used by [useLongPress](https://react-tools.ndria.dev/hooks/events/useLongPress). * * @template E - The event type received by the callback. */ type useLongPressCallback = (evt: E) => void; /** * Options accepted by [useLongPress](https://react-tools.ndria.dev/hooks/events/useLongPress). * * @template E - The event type received by the callbacks. */ type useLongPressOptions = { /** * Duration in milliseconds the pointer must be held before the long-press * callback fires. Defaults to `1000` ms when omitted. */ duration?: number; /** * Called when the pointer is released before `duration` has elapsed (a "normal" short press). * Use this to handle both tap and long-press on the same element. */ normalPress?: (evt: E) => void; /** * Called when the pointer is pressed down on the target element, before the * long-press duration has elapsed. */ onStart?: (evt: E) => void; /** * Called when the press ends, regardless of whether the long-press threshold * was reached (i.e. on `pointerup` or `pointerleave`). */ onFinish?: (evt: E) => void; }; /** * Return value of [useLongPress](https://react-tools.ndria.dev/hooks/events/useLongPress). * * A React ref callback to attach to the target element. Wiring this ref is required * for the hook to register its pointer event listeners and detect long-press gestures. * * @template T - The element type the ref callback is attached to. */ type UseLongPressResult = RefCallback; /** * Return value of [useMeasure](https://react-tools.ndria.dev/hooks/events/useMeasure). * * @template T - The element type being measured. */ type UseMeasureResult = [ /** * A React ref callback to attach to the target element. Wiring this ref is * required for measurements to be taken — the hook observes the element via * a `ResizeObserver` and updates the returned rect whenever its size changes. * `null` until the element has been mounted. */ RefCallback | null, /** * A read-only {@link DOMRectReadOnly} describing the current bounding box of * the observed element. Updated reactively on every resize. Contains `x`, `y`, * `width`, `height`, `top`, `right`, `bottom`, and `left`. Initialised to an * empty `DOMRectReadOnly` before the element mounts. */ DOMRectReadOnly ]; /** * Parameters accepted by [useMutationObserver](https://react-tools.ndria.dev/hooks/events/useMutationObserver). * * @template T - The element type observed by the {@link MutationObserver}. */ type UseMutationObserverProps = { /** * The {@link MutationCallback} invoked whenever a mutation matching the * configured `opts` is detected on the observed element. Receives the array * of {@link MutationRecord} objects and the observer instance itself. */ cb: MutationCallback; /** * Controls how the target element is attached to the observer: * - **`{ mode: "ref" }`** — The hook returns a `RefCallback` to attach directly * to the JSX element. The observer is connected when the ref is set. * - **`{ mode: "effect", targetRef }`** — The observer is connected inside a * `useEffect` using the provided `RefObject`. * - **`{ mode: "layout-effect", targetRef }`** — The observer is connected * inside a `useLayoutEffect` using the provided `RefObject`, running * synchronously before the browser paints. */ attachOptions: { mode: "ref"; targetRef?: never; } | { mode: "effect" | "layout-effect"; targetRef: RefObject; }; /** * Options forwarded to the {@link MutationObserver} constructor. Controls which * types of mutations are observed (`childList`, `attributes`, `characterData`, * `subtree`, etc.). When omitted, the observer uses the browser defaults. */ opts?: MutationObserverInit; }; /** * Return value of [useMutationObserver](https://react-tools.ndria.dev/hooks/events/useMutationObserver). * * @template T - The element type observed by the {@link MutationObserver}. */ type UseMutationObserverResult = { /** * A React ref callback to attach to the target element. Only populated when * `attachOptions.mode` is `"ref"` — `null` in `"effect"` and `"layout-effect"` * modes where the target is provided via `targetRef` instead. */ ref: RefCallback | null; /** * Disconnects the observer, stopping all mutation notifications. The observer * can be restarted by calling {@link UseMutationObserverResult.reconnect}. */ disconnect: () => void; /** * Reconnects the observer after it has been disconnected, resuming mutation * notifications for the target element. */ reconnect: () => void; /** * Empties the observer's record queue and returns an array of * {@link MutationRecord} objects describing all mutations that have been detected * but not yet delivered to the callback. Useful for flushing pending mutations * before disconnecting. */ takeRecords: () => MutationRecord[]; }; /** * Reactive state snapshot of the browser's network connection, returned by `useNetwork`. * Properties from the Network Information API (`downlink`, `effectiveType`, etc.) are * only populated when the API is supported by the browser. */ interface ConnectionState { /** `true` when the browser supports the Network Information API (`navigator.connection`). */ isSupported: boolean; /** `true` when the browser reports being online (`navigator.onLine`). */ isOnline: boolean; /** Timestamp (ms since epoch) of the last connectivity change. Only available when supported. */ since?: number; /** * Effective bandwidth estimate in Mb/s. Based on recently observed application-layer * throughput. Only available when `isSupported` is `true`. */ downlink?: number; /** * Maximum downlink speed for the underlying connection technology in Mb/s. * Only available for some connection types (e.g. cellular). */ downlinkMax?: number; /** * Effective connection type determined from round-trip time and downlink values. * - `"slow-2g"` — suitable for text-only pages. * - `"2g"` — suitable for small images. * - `"3g"` — suitable for media. * - `"4g"` — suitable for HD video, real-time apps. */ effectiveType?: "slow-2g" | "2g" | "3g" | "4g"; /** * Estimated round-trip time of the current connection in milliseconds, rounded to * the nearest 25ms. Only available when `isSupported` is `true`. */ rtt?: number; /** * `true` when the user or device has requested reduced data usage * (Data Saver / Low Data Mode). Only available when `isSupported` is `true`. */ saveData?: boolean; /** * Underlying connection technology type. * Only available when `isSupported` is `true`. */ type?: "bluetooth" | "cellular" | "ethernet" | "none" | "wifi" | "wimax" | "other" | "unknown"; } /** * Parameters accepted by [useNetwork](https://react-tools.ndria.dev/hooks/events/useNetwork) when called without `selectedInfo`. * The hook returns the full {@link ConnectionState} object and re-renders on any * network property change. */ type UseNetworkProps = { selectedInfo?: undefined; }; /** * Parameters accepted by [useNetwork](https://react-tools.ndria.dev/hooks/events/useNetwork) when called with a `selectedInfo` array. * The hook returns only the requested subset of {@link ConnectionState} properties, * avoiding re-renders when unrelated network properties change. * * @template T - A non-empty subset of {@link ConnectionState} property keys to subscribe to. */ type UseNetworkSelectedProps = { /** * A non-empty array of {@link ConnectionState} property keys to selectively * subscribe to (e.g. `["isOnline", "effectiveType"]`). The hook returns an object * containing only these keys, preventing unnecessary re-renders when other network * properties change. Must contain at least one element — use the unparameterised * overload instead if you need the full state. */ selectedInfo: ArrayMinLength1; }; /** * Return value of [useNetwork](https://react-tools.ndria.dev/hooks/events/useNetwork) when called without `selectedInfo`. * The full reactive {@link ConnectionState} snapshot. See {@link ConnectionState} * for a description of each property. */ type UseNetworkResult = ConnectionState; /** * Return value of [useNetwork](https://react-tools.ndria.dev/hooks/events/useNetwork) when called with a `selectedInfo` array. * A partial reactive snapshot containing only the requested {@link ConnectionState} * keys. See {@link ConnectionState} for a description of each property. * * @template T - The subset of {@link ConnectionState} keys that were requested. */ type UseNetworkSelectedResult = { [K in T]: ConnectionState[K]; }; /** * Parameters accepted by [usePerformAction](https://react-tools.ndria.dev/hooks/events/usePerformAction). * * @template T - The type of the callback function. Must extend a function accepting any number of unknown arguments and returning void. */ type UsePerformActionProps void> = { /** * The function to wrap. Its parameter types are preserved on the returned * stable callback via `Parameters`, ensuring type safety at call sites. */ cb: T; }; /** * Return value of [usePerformAction](https://react-tools.ndria.dev/hooks/events/usePerformAction). * * A stable memoized function with the same parameter signature as `cb`. Calling it * always invokes the latest version of `cb` without the wrapped function identity * changing between renders. * * @template T - The type of the original callback function. */ type UsePerformActionResult void> = (...args: Parameters) => void; /** * Parameters accepted by [useResizeObserver](https://react-tools.ndria.dev/hooks/events/useResizeObserver). * * @template T - The element type observed by the {@link ResizeObserver}. */ type UseResizeObserverProps = { /** * The {@link ResizeObserverCallback} invoked whenever the observed element's * size changes. Receives the array of {@link ResizeObserverEntry} objects and * the observer instance itself. */ cb: ResizeObserverCallback; /** * Controls how the target element is attached to the observer: * - **`{ mode: "ref" }`** — The hook returns a `RefCallback` to attach directly * to the JSX element. The observer is connected when the ref is set. * - **`{ mode: "effect", targetRef }`** — The observer is connected inside a * `useEffect` using the provided `RefObject`. * - **`{ mode: "layout-effect", targetRef }`** — The observer is connected * inside a `useLayoutEffect` using the provided `RefObject`, running * synchronously before the browser paints. */ attachOptions: { mode: "ref"; targetRef?: never; } | { mode: "effect" | "layout-effect"; targetRef: RefObject; }; /** * Options forwarded to the {@link ResizeObserver} `observe()` call. Currently * supports `box` to select which CSS box model to observe (`"content-box"`, * `"border-box"`, or `"device-pixel-content-box"`). When omitted, the observer * defaults to `"content-box"`. */ opts?: ResizeObserverOptions; }; /** * Return value of [useResizeObserver](https://react-tools.ndria.dev/hooks/events/useResizeObserver). * * @template T - The element type observed by the {@link ResizeObserver}. */ type UseResizeObserverResult = { /** * A React ref callback to attach to the target element. Only populated when * `attachOptions.mode` is `"ref"` — `null` in `"effect"` and `"layout-effect"` * modes where the target is provided via `targetRef` instead. */ ref: RefCallback | null; /** * Disconnects the observer, stopping all resize notifications. The observer * can be restarted by calling {@link UseResizeObserverResult.reconnect}. */ disconnect: () => void; /** * Reconnects the observer after it has been disconnected, resuming resize * notifications for the target element. */ reconnect: () => void; }; type UseResponsiveKeysType = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl"; type UseResponsiveKeys = T extends UseResponsiveKeysType ? Extract : never; /** * Options accepted by {@link useResponsive}. * * @template T - The breakpoint key type inferred from the provided config. */ type UseResponsiveBreakpoints = { [k in T]: number | { value: number; condition: "<" | "<=" | ">" | ">="; }; }; /** * A record mapping each breakpoint key to a boolean indicating whether the * current viewport matches that breakpoint. Returned by {@link useResponsive}. * * @template T - The breakpoint key type. Defaults to the keys of the built-in * `defaultConfig` when no custom config is provided. */ type UseResponsiveResult = { [s in UseResponsiveKeys]: boolean; }; /** * Parameters accepted by [useScrollIntoView](https://react-tools.ndria.dev/hooks/events/useScrollIntoView). * * @template E - The scrollable container element type. Defaults to `null`, which means the nearest scrollable ancestor is used automatically. */ type UseScrollIntoViewProps = { /** * Duration of the scroll animation in milliseconds. Defaults to `1000`. */ duration?: number; /** * The scroll axis to animate along: * - **`"y"`** *(default)* — Vertical scrolling. * - **`"x"`** — Horizontal scrolling. */ axis?: "x" | "y"; /** * An easing function that maps a normalised time value `t ∈ [0, 1]` to a * progress value, controlling the acceleration curve of the scroll animation. * Defaults to `easeInOutSine` when omitted. */ animation?: (t: number) => number; /** * Additional scroll offset in pixels applied after the target element is * aligned. Positive values scroll past the target; negative values stop * short of it. Defaults to `0`. */ offset?: number; /** * When `true`, the ongoing scroll animation can be interrupted by user input * (e.g. a manual scroll gesture). Defaults to `false`. */ cancelable?: boolean; /** * Called when the scroll animation completes successfully (i.e. reaches the * target position without being cancelled). */ onFinish?: () => void; /** * The scrollable container element to scroll within. Accepts a factory function * `() => E`, a direct element reference, or a React `RefObject`. * When the resolved value is `null`, the nearest scrollable ancestor of the * target element is used automatically. */ scrollableElement: (() => E) | E | RefObject; }; /** * Return value of [useScrollIntoView](https://react-tools.ndria.dev/hooks/events/useScrollIntoView). * * @template T - The element type to scroll into view. */ type UseScrollIntoViewResult = { /** * A mutable ref to attach to the target element that should be scrolled into * view. Must be attached for {@link UseScrollIntoViewResult.scroll} to work. */ targetRef: React.MutableRefObject; /** * Starts the scroll animation, bringing the target element into view within the * scrollable container. Accepts an optional alignment hint: * - **`"start"`** — Aligns the top (or left) edge of the target with the * top (or left) of the container. * - **`"center"`** *(default)* — Centers the target within the container. * - **`"end"`** — Aligns the bottom (or right) edge of the target with the * bottom (or right) of the container. */ scroll: (alignment?: "start" | "center" | "end") => void; /** * Cancels the currently running scroll animation, if any. Only has an effect * when `cancelable` is `true` in the hook options. */ cancel: () => void; }; /** * Controls how the target element is attached to the {@link IntersectionObserver} * used internally by [useVisible](https://react-tools.ndria.dev/hooks/events/useVisible). * * @template T - The element type being observed. */ type UseVisibleAttachOptions = { /** * The hook returns a `RefCallback` to attach directly to the JSX element. * The observer is connected when the ref is set and disconnected when the * element is unmounted. */ mode: "ref"; targetRef?: never; } | { /** * - **`"effect"`** — The observer is connected inside a `useEffect` using * the provided `targetRef`, running asynchronously after the browser paints. * - **`"layout-effect"`** — The observer is connected inside a * `useLayoutEffect` using the provided `targetRef`, running synchronously * before the browser paints. */ mode: "effect" | "layout-effect"; /** * A React `RefObject` pointing to the element to observe. Required when * `mode` is `"effect"` or `"layout-effect"`. */ targetRef: RefObject; }; /** * Options accepted by [useVisible](https://react-tools.ndria.dev/hooks/events/useVisible). * Extends {@link IntersectionObserverInit} with an additional `withRatio` flag. */ type UseVisibleOptions = IntersectionObserverInit & { /** * When `true`, the hook returns a third tuple entry containing the current * intersection ratio as a `number` between `0` and `1`, where `0` means the * element is fully outside the viewport and `1` means it is fully visible. * When `false` or omitted, only the boolean visibility flag is returned. */ withRatio?: boolean; }; /** * Return value of [useVisible](https://react-tools.ndria.dev/hooks/events/useVisible) when `withRatio` is `false`, `undefined`, * or `opts` is omitted entirely. * * @template T - The element type being observed. */ type UseVisibleResult = [ /** * A React ref callback to attach to the target element. Only populated when * `attachOptions.mode` is `"ref"` — `null` in `"effect"` and `"layout-effect"` * modes where the target is provided via `targetRef` instead. */ RefCallback | null, /** * Reactive boolean that is `true` when at least part of the target element * intersects the viewport (or the configured `root`), and `false` otherwise. */ boolean ]; /** * Return value of [useVisible](https://react-tools.ndria.dev/hooks/events/useVisible) when `withRatio` is `true`. * * @template T - The element type being observed. */ type UseVisibleWithRatioResult = [ /** * A React ref callback to attach to the target element. Only populated when * `attachOptions.mode` is `"ref"` — `null` in `"effect"` and `"layout-effect"` * modes where the target is provided via `targetRef` instead. */ RefCallback | null, /** * Reactive boolean that is `true` when at least part of the target element * intersects the viewport (or the configured `root`), and `false` otherwise. */ boolean, /** * The current intersection ratio as a number between `0` and `1`. `0` means * the element is fully outside the viewport; `1` means it is fully visible. * Updated on every intersection change event. */ number ]; /** * **`useEvents`**: Communication system based on Events pattern implemented on a EventTarget subclass. AddListener and dispatch functions to communicate. The result of invoking the _addListener_ function in turn returns a function that can be used to _removeListener_ on event. Otherwise, the listener is automatically removed when the component that has instantiated it is unmounted. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useEvents) * @template T - The type of the `detail` payload carried by {@link CustomEvent} instances. Defaults to `unknown` when not specified. * @returns {UseEventsResult} result {@link UseEventsResult} */ declare const useEvents: () => UseEventsResult; /** * __`useEventListener`__: Hook to simplify add and remove EventListener use. It's persist during rerendering and automatically remove eventlistener on unMount component lifecycle. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useEventListener) * @template T - The event type key (e.g. `"click"`, `"keydown"`). Must be a key of `DocumentEventMap`, `HTMLElementEventMap`, `WindowEventMap`, or an arbitrary string for custom events. * @template E - The element type the listener is attached to. * @param {UseEventListenerProps} element - {@link UseEventListenerProps} * @returns {UseEventListenerResult} result {@link UseEventListenerResult} */ declare function useEventListener({ type, listener, element, listenerOpts, effectType }: { type: T | (T[]); listener: ((evt: DocumentEventMap[T]) => unknown | Promise); element?: RefObject | E | Window; listenerOpts?: boolean | AddEventListenerOptions; effectType?: "normal" | "layout"; }): (() => void); declare function useEventListener({ type, listener, element, listenerOpts, effectType }: { type: T | (T[]); listener: ((evt: HTMLElementEventMap[T]) => unknown | Promise); element?: RefObject | E | Window; listenerOpts?: boolean | AddEventListenerOptions; effectType?: "normal" | "layout"; }): (() => void); declare function useEventListener({ type, listener, element, listenerOpts, effectType }: { type: T | (T[]); listener: ((evt: E) => unknown | Promise); element?: RefObject | S | Window; listenerOpts?: boolean | AddEventListenerOptions; effectType?: "normal" | "layout"; }): (() => void); /** * __`useEventDispatcher`__: Hook to dispatch an Event or a CustomEvent. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useEventDispatcher) * @param {UseEventDispatcherProps} element - {@link UseEventDispatcherProps} * @returns {UseEventDispatcherResult} result {@link UseEventDispatcherResult} */ declare const useEventDispatcher: (element: UseEventDispatcherProps) => UseEventDispatcherResult; /** * **`usePerformAction`**: Hook that executes a callback after a render. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/usePerformAction) * @template T - The type of the callback function. Must extend a function accepting any number of unknown arguments and returning void. * @param {UsePerformActionProps["cb"]} cb - {@link UsePerformActionProps} * @returns {UsePerformActionResult} result {@link UsePerformActionResult} */ declare const usePerformAction: void>(cb: UsePerformActionProps["cb"]) => UsePerformActionResult; /** * **`useDocumentVisibility`**: Hook to track document visibility. * @see [Document VisibilityState](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState). * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useDocumentVisibility) * @returns {DocumentVisibilityState} documentVisibility */ declare const useDocumentVisibility: () => DocumentVisibilityState; /** * **`useHover`**: Hook that determines whether the item is hovered or not and handles state hovers. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useHover) * @param {UseHoverProps["target"]} target - {@link UseHoverProps} * @param {UseHoverProps["opts"]} [opts] - {@link UseHoverProps} * @returns {boolean|void} result */ declare function useHover(target: UseHoverProps["target"], opts?: { onEnter?: (evt: Event) => void; onChange?: (isHover: boolean) => void; onLeave?: (evt: Event) => void; returnValue?: true; }): boolean; declare function useHover(target: UseHoverProps["target"], opts?: { onEnter?: (evt: Event) => void; onChange?: (isHover: boolean) => void; onLeave?: (evt: Event) => void; returnValue?: false; }): void; /** * **`useResponsive`**: Hook for getting responsive window size. * * By default Breakpoints are: * * - xs: { value: 576, condition: "<" } * - sm: { value: 576, condition: ">=" } * - md: { value: 768, condition: ">=" } * - lg: { value: 992, condition: ">=" } * - xl: { value: 1200, condition: ">=" } * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useResponsive) * @template T - The breakpoint key type inferred from the provided config. * @param {UseResponsiveBreakpoints} [config] - {@link UseResponsiveBreakpoints} * @returns {UseResponsiveResult<"xs" | "sm" | "md" | "lg" | "xl"> | UseResponsiveResult} result {@link UseResponsiveResult} */ declare function useResponsive(config?: undefined): UseResponsiveResult<"xs" | "sm" | "md" | "lg" | "xl">; declare function useResponsive(config?: UseResponsiveBreakpoints): UseResponsiveResult; /** * **`useClickOutside`**: Hook to listen and execute an action when there is a click outside an element. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useClickOutside) * @param {UseClickOutsideProps["target"]} target - {@link UseClickOutsideProps} * @param {UseClickOutsideProps["handler"]} handler - {@link UseClickOutsideProps} * @returns {void} result */ declare const useClickOutside: (target: UseClickOutsideProps["target"], handler: UseClickOutsideProps["handler"]) => void; /** * **`useNetwork`**: Hook to detect network connection infos. It takes optinally a parameter __selectedInfo__ to specify a subset of connection status property. * @see [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation). * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useNetwork) * @template T - A non-empty subset of {@link ConnectionState} property keys to subscribe to. * @param {UseNetworkSelectedProps["selectedInfo"] | UseNetworkProps["selectedInfo"]} [selectedInfo] - {@link UseNetworkProps} * @returns {UseNetworkResult | UseNetworkSelectedResult} result {@link UseNetworkResult} */ declare function useNetwork(selectedInfo?: UseNetworkProps["selectedInfo"]): UseNetworkResult; declare function useNetwork(selectedInfo?: UseNetworkSelectedProps["selectedInfo"]): UseNetworkSelectedResult; /** * **`useIsOnline`**: Hook to detect network connection status. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useIsOnline) * @returns {boolean} result */ declare const useIsOnline: () => boolean; /** * **`useResizeObserver`**: Hook to use Resize Observer. * @see [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API). * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useResizeObserver) * @template T - The element type observed by the {@link ResizeObserver}. * @param {UseResizeObserverProps["cb"]} cb - {@link UseResizeObserverProps} * @param {UseResizeObserverProps["attachOptions"]} attachOptions - {@link UseResizeObserverProps} * @param {UseResizeObserverProps["opts"]} [opts] - {@link UseResizeObserverProps} * @returns {UseResizeObserverResult} result {@link UseResizeObserverResult} */ declare const useResizeObserver: (cb: UseResizeObserverProps["cb"], attachOptions: UseResizeObserverProps["attachOptions"], opts?: UseResizeObserverProps["opts"]) => UseResizeObserverResult; /** * **`useIntersectionObserver`**: Hook to use Intersection Observer. * @see [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useIntersectionObserver) * @template T - The element type observed by the {@link IntersectionObserver}. * @param {UseIntersectionObserverProps["cb"]} cb - {@link UseIntersectionObserverProps} * @param {UseIntersectionObserverProps["attachOptions"]} attachOptions - {@link UseIntersectionObserverProps} * @param {UseIntersectionObserverProps["opts"]} [opts] - {@link UseIntersectionObserverProps} * @returns {UseIntersectionObserverResult} result {@link UseIntersectionObserverResult} */ declare const useIntersectionObserver: (cb: UseIntersectionObserverProps["cb"], attachOptions: UseIntersectionObserverProps["attachOptions"], opts?: UseIntersectionObserverProps["opts"]) => UseIntersectionObserverResult; /** * **`useMutationObserver`**: Hook to use Mutation Observer. * @see [Mutation Observer API](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useMutationObserver) * @template T - The element type observed by the {@link MutationObserver}. * @param {UseMutationObserverProps["cb"]} cb - {@link UseMutationObserverProps} * @param {UseMutationObserverProps["attachOptions"]} attachOptions - {@link UseMutationObserverProps} * @param {UseMutationObserverProps["opts"]} [opts] - {@link UseMutationObserverProps} * @returns {UseMutationObserverResult} result {@link UseMutationObserverResult} */ declare const useMutationObserver: (cb: UseMutationObserverProps["cb"], attachOptions: UseMutationObserverProps["attachOptions"], opts?: UseMutationObserverProps["opts"]) => UseMutationObserverResult; /** * **`useMeasure`**: Hook to measure and track element's dimensions. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useMeasure) * @template T - The element type being measured. * @returns {UseMeasureResult} result {@link UseMeasureResult} */ declare const useMeasure: () => UseMeasureResult; /** * **`useVisible`**: Hook to know if an element is visible and optionally the visible area ration of the element. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useVisible) * @template T - The element type being observed. * @param {UseVisibleAttachOptions} attachOptions - {@link UseVisibleAttachOptions} * @param {UseVisibleOptions} [opts] - {@link UseVisibleOptions} * @returns {UseVisibleResult | UseVisibleWithRatioResult} result {@link UseVisibleResult} */ declare function useVisible(attachOptions: UseVisibleAttachOptions, opts?: undefined): UseVisibleResult; declare function useVisible(attachOptions: UseVisibleAttachOptions, opts?: IntersectionObserverInit & { withRatio?: undefined; }): UseVisibleResult; declare function useVisible(attachOptions: UseVisibleAttachOptions, opts?: IntersectionObserverInit & { withRatio?: true; }): UseVisibleWithRatioResult; /** * **`useScrollIntoView`**: Hook to scroll an element into view. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useScrollIntoView) * @template E - The scrollable container element type. Defaults to `null`, which means the nearest scrollable ancestor is used automatically. * @template T - The element type to scroll into view. * @param {UseScrollIntoViewProps} param - {@link UseScrollIntoViewProps} * @returns {UseScrollIntoViewResult} result {@link UseScrollIntoViewResult} */ declare const useScrollIntoView: ({ duration, axis, animation, offset, cancelable, onFinish, scrollableElement }: UseScrollIntoViewProps) => UseScrollIntoViewResult; /** * **`useMouse`**: Hook to track mouse position also in relationship with an element. It works with pointerEvents. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useMouse) * @param {UseMouseOpts} [opts] - {@link UseMouseOpts} * @returns {UseMouseResult} result {@link UseMouseResult} */ declare function useMouse(opts?: undefined): { x: number; y: number; }; declare function useMouse(opts?: { type?: "client" | "page" | "screen"; relativeElement?: undefined; }): { x: number | null; y: number | null; }; declare function useMouse(opts?: { type?: "client" | "page" | "screen"; relativeElement?: RefObject | HTMLElement; }): { x: number | null; y: number | null; relativeElementDim?: DOMRect; }; /** * **`useLongPress`**: Hook to execute a callback on a long press event. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useLongPress) * @template E - The event type received by the callback. * @template T - The element type the ref callback is attached to. * @param {useLongPressCallback} cb - {@link useLongPressCallback} * @param {useLongPressOptions} opts - {@link useLongPressOptions} * @returns {RefCallback} result */ declare const useLongPress: (cb: useLongPressCallback, { duration, normalPress, onStart, onFinish }: useLongPressOptions) => UseLongPressResult; /** * **`useDoubleClick`**: hook to handle double click event. Double clicking in react as well as with vanilla js, it is possible to manage it but it is not possible to have both managers on the same element. Thanks to this hook it is possible to do this, and it works with all events that can be associated with a user click (for example _mousedown_ but also _touchstart_). * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useDoubleClick) * @template T - The element type the synthetic event originates from. * @template E - The underlying native event type. * @param {UseDoubleClickProps} handler - {@link UseDoubleClickProps} * @returns {UseDoubleClickResult} result {@link UseDoubleClickResult} */ declare const useDoubleClick: (handler: UseDoubleClickProps) => UseDoubleClickResult; /** * **`useBeforeUnload`**: Hook to handle beforeunload event. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useBeforeUnload) * @param {UseBeforeUnloadProps} param - {@link UseBeforeUnloadProps} * @returns {UseBeforeUnloadResult} result {@link UseBeforeUnloadResult} */ declare const useBeforeUnload: ({ element, listener, opts }: UseBeforeUnloadProps) => UseBeforeUnloadResult; /** * **`useScreen`**: Hook to work with Screen Orientation API. * @see [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API). * @see [Window Management API](https://developer.mozilla.org/en-US/docs/Web/API/Window_Management_API). * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useScreen) * @param {UseScreenProps["allScreen"]} [allScreen] - {@link UseScreenProps} * @returns {UseScreenResult} result {@link UseScreenResult} */ declare const useScreen: (allScreen?: UseScreenProps["allScreen"]) => UseScreenResult; /** * __`useHotKeys`__: Hook to listen for the keyboard press, support key combinations, built on [hotKeyHandler](#/hotKeyHandler) utility function. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useHotKeys) * @param {UseHotKeysProps} element - {@link UseHotKeysProps} * @returns {UseHotKeysResult} result {@link UseHotKeysResult} */ declare const useHotKeys: ({ hotKey, type, target, listener, listenerOpts }: UseHotKeysProps) => UseHotKeysResult; /** * Parameters accepted by [usePinchZoom](https://react-tools.ndria.dev/hooks/events/usePinchZoom). */ type UsePinchZoomProps = { /** * The target on which pointer events are monitored to detect pinch gestures. * Accepts either a React `RefObject` or a direct `Window` reference. * Defaults to `window` when omitted. */ target?: RefObject | Window; /** * Callback invoked on each pointer move event that constitutes part of a pinch * gesture. Receives the triggering {@link PointerEvent} and a direction string: * - **`"zoomIn"`** — The two pointers are moving apart (expanding gesture). * - **`"zoomOut"`** — The two pointers are moving together (contracting gesture). * May return a `Promise` for async handlers. */ listener: (evt: PointerEvent, type: "zoomIn" | "zoomOut") => void | Promise; }; /** * Return value of [usePinchZoom](https://react-tools.ndria.dev/hooks/events/usePinchZoom). * * A stable cleanup function that manually removes all pointer event listeners from * the target. Calling it is optional — the hook cleans up automatically on unmount * — but useful to detach listeners earlier on demand. */ type UsePinchZoomResult = () => void; /** * **`usePinchZoom`**: Hook to handle pinch zoom gestures. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/usePinchZoom) * @param {UsePinchZoomProps} param - {@link UsePinchZoomProps} * @returns {UsePinchZoomResult} result {@link UsePinchZoomResult} */ declare const usePinchZoom: ({ target, listener }: UsePinchZoomProps) => UsePinchZoomResult; /** * **`usePointerLock`**: Hook to use PointerLock API. * @see [PointerLock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API). * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/usePointerLock) * @template T - The `HTMLElement` subtype that the pointer lock is requested on. * @param {UsePointerLockProps} param - {@link UsePointerLockProps} * @returns {UsePointerLockResult} result {@link UsePointerLockResult} */ declare const usePointerLock: ({ target, unadjustedMovement, onLock, onUnlock, onError }: UsePointerLockProps) => UsePointerLockResult; /** * **`useContextMenu`**: Hook to add contextmenu event listener. The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse button, or by pressing the context menu key. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useContextMenu) * @param {UseContextMenuProps} param - {@link UseContextMenuProps} * @returns {void} */ declare const useContextMenu: ({ element, listener, effectType, listenerOpts }: UseContextMenuProps) => void; /** * **`useSwipe`**: hook to handle swipe gesture. [See demo](https://react-tools.ndria.dev/#/hooks/events/useSwipe) * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useBeforeUnload) * @param {UseSwipeProps} param - {@link UseSwipeProps} * @returns {UseSwipeResult} result {@link UseSwipeResult} */ declare const useSwipe: ({ target, onSwipeStart, onSwipe, onSwipeEnd, options }: UseSwipeProps) => UseSwipeResult; /** * **`useInfiniteScroll`**: Hook to deal with large sets of data. It allow users to scroll through content endlessly without explicit pagination or loading new pages. * @see [📖 Documentation](https://react-tools.ndria.dev/hooks/events/useInfiniteScroll) * @template T - The type of the data returned by each page request. * @template E - The scrollable container element type, extending {@link Element}. * @param {UseInfiniteScrollProps} param - {@link UseInfiniteScrollProps} * @returns {UseInfiniteScrollResult} result {@link UseInfiniteScrollResult} */ declare const useInfiniteScroll: ({ request, ref, hasMoreData, threshold, onBefore, onError, onSuccess }: UseInfiniteScrollProps) => UseInfiniteScrollResult; export { useVisible as A, useClickOutside as a, useContextMenu as b, useDocumentVisibility as c, useDoubleClick as d, useEventDispatcher as e, useEventListener as f, useEvents as g, useHotKeys as h, useHover as i, useInfiniteScroll as j, useIntersectionObserver as k, useIsOnline as l, useLongPress as m, useMeasure as n, useMouse as o, useMutationObserver as p, useNetwork as q, usePerformAction as r, usePinchZoom as s, usePointerLock as t, useBeforeUnload as u, useResizeObserver as v, useResponsive as w, useScreen as x, useScrollIntoView as y, useSwipe as z }; export type { UseNetworkProps as $, ScreenDetails as B, ScreenDetailsEvt as C, SwipeDirection as D, UseBeforeUnloadResult as E, UseClickOutsideProps as F, UseContextMenuProps as G, UseDoubleClickProps as H, UseDoubleClickResult as I, UseEventDispatcherProps as J, UseEventDispatcherResult as K, UseEventsResult as L, UseHotKeysProps as M, UseHotKeysResult as N, OrientationLockType as O, UseHoverOptions as P, UseHoverProps as Q, UseInfiniteScrollProps as R, ScreenDetail as S, UseInfiniteScrollResult as T, UseBeforeUnloadProps as U, UseIntersectionObserverProps as V, UseIntersectionObserverResult as W, UseLongPressResult as X, UseMeasureResult as Y, UseMutationObserverProps as Z, UseMutationObserverResult as _, UseNetworkResult as a0, UseNetworkSelectedProps as a1, UseNetworkSelectedResult as a2, UsePerformActionProps as a3, UsePerformActionResult as a4, UsePointerLockProps as a5, UsePointerLockResult as a6, UseResizeObserverProps as a7, UseResizeObserverResult as a8, UseResponsiveBreakpoints as a9, UseResponsiveKeys as aa, UseResponsiveResult as ab, UseScreenProps as ac, UseScreenResult as ad, UseScrollIntoViewProps as ae, UseScrollIntoViewResult as af, UseSwipeProps as ag, UseSwipeResult as ah, UseVisibleAttachOptions as ai, UseVisibleOptions as aj, UseVisibleResult as ak, UseVisibleWithRatioResult as al, useLongPressCallback as am, useLongPressOptions as an };