@oneplatformdev/hooks 0.1.0-8 → 0.1.0-81

package/src/useDebounceValue/useDebounceValue.ts

@@ -1,67 +0,0 @@
-import { useRef, useState } from 'react'
-
-import type { DebouncedState } from '../useDebounceCallback'
-import { useDebounceCallback } from '../useDebounceCallback'
-
-/**
- * Hook options.
- * @template T - The type of the value.
- */
-type UseDebounceValueOptions<T> = {
-  /**
-   * Determines whether the function should be invoked on the leading edge of the timeout.
-   * @default false
-   */
-  leading?: boolean
-  /**
-   * Determines whether the function should be invoked on the trailing edge of the timeout.
-   * @default false
-   */
-  trailing?: boolean
-  /**
-   * The maximum time the specified function is allowed to be delayed before it is invoked.
-   */
-  maxWait?: number
-  /** A function to determine if the value has changed. Defaults to a function that checks if the value is strictly equal to the previous value. */
-  equalityFn?: (left: T, right: T) => boolean
-}
-
-/**
- * Custom hook that returns a debounced version of the provided value, along with a function to update it.
- * @template T - The type of the value.
- * @param {T | (() => T)} initialValue - The value to be debounced.
- * @param {number} delay - The delay in milliseconds before the value is updated (default is 500ms).
- * @param {object} [options] - Optional configurations for the debouncing behavior.
- * @returns {[T, DebouncedState<(value: T) => void>]} An array containing the debounced value and the function to update it.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-debounce-value)
- * @example
- * ```tsx
- * const [debouncedValue, updateDebouncedValue] = useDebounceValue(inputValue, 500, { leading: true });
- * ```
- */
-export function useDebounceValue<T>(
-  initialValue: T | (() => T),
-  delay: number,
-  options?: UseDebounceValueOptions<T>,
-): [T, DebouncedState<(value: T) => void>] {
-  const eq = options?.equalityFn ?? ((left: T, right: T) => left === right)
-  const unwrappedInitialValue =
-    initialValue instanceof Function ? initialValue() : initialValue
-  const [debouncedValue, setDebouncedValue] = useState<T>(unwrappedInitialValue)
-  const previousValueRef = useRef<T | undefined>(unwrappedInitialValue)
-
-  const updateDebouncedValue = useDebounceCallback(
-    setDebouncedValue,
-    delay,
-    options,
-  )
-
-  // Update the debounced value if the initial value changes
-  if (!eq(previousValueRef.current as T, unwrappedInitialValue)) {
-    updateDebouncedValue(unwrappedInitialValue)
-    previousValueRef.current = unwrappedInitialValue
-  }
-
-  return [debouncedValue, updateDebouncedValue]
-}

package/src/useDocumentTitle/index.ts

@@ -1 +0,0 @@
-export * from './useDocumentTitle'

package/src/useDocumentTitle/useDocumentTitle.ts

@@ -1,43 +0,0 @@
-import { useRef } from 'react'
-
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect'
-import { useUnmount } from '../useUnmount'
-
-/** Hook options. */
-type UseDocumentTitleOptions = {
-  /** Whether to keep the title after unmounting the component (default is `true`). */
-  preserveTitleOnUnmount?: boolean
-}
-
-/**
- * Custom hook that sets the document title.
- * @param {string} title - The title to set.
- * @param {?UseDocumentTitleOptions} [options] - The options.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-document-title)
- * @example
- * ```tsx
- * useDocumentTitle('My new title');
- * ```
- */
-export function useDocumentTitle(
-  title: string,
-  options: UseDocumentTitleOptions = {},
-): void {
-  const { preserveTitleOnUnmount = true } = options
-  const defaultTitle = useRef<string | null>(null)
-
-  useIsomorphicLayoutEffect(() => {
-    defaultTitle.current = window.document.title
-  }, [])
-
-  useIsomorphicLayoutEffect(() => {
-    window.document.title = title
-  }, [title])
-
-  useUnmount(() => {
-    if (!preserveTitleOnUnmount && defaultTitle.current) {
-      window.document.title = defaultTitle.current
-    }
-  })
-}

package/src/useEventCallback/index.ts

@@ -1 +0,0 @@
-export * from './useEventCallback'

package/src/useEventCallback/useEventCallback.ts

@@ -1,40 +0,0 @@
-import { useCallback, useRef } from 'react'
-
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect'
-
-/**
- * Custom hook that creates a memoized event callback.
- * @template Args - An array of argument types for the event callback.
- * @template R - The return type of the event callback.
- * @param {(...args: Args) => R} fn - The callback function.
- * @returns {(...args: Args) => R} A memoized event callback function.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-event-callback)
- * @example
- * ```tsx
- * const handleClick = useEventCallback((event) => {
- *   // Handle the event here
- * });
- * ```
- */
-export function useEventCallback<Args extends unknown[], R>(
-  fn: (...args: Args) => R,
-): (...args: Args) => R
-export function useEventCallback<Args extends unknown[], R>(
-  fn: ((...args: Args) => R) | undefined,
-): ((...args: Args) => R) | undefined
-export function useEventCallback<Args extends unknown[], R>(
-  fn: ((...args: Args) => R) | undefined,
-): ((...args: Args) => R) | undefined {
-  const ref = useRef<typeof fn>(() => {
-    throw new Error('Cannot call an event handler while rendering.')
-  })
-
-  useIsomorphicLayoutEffect(() => {
-    ref.current = fn
-  }, [fn])
-
-  return useCallback((...args: Args) => ref.current?.(...args), [ref]) as (
-    ...args: Args
-  ) => R
-}

package/src/useEventListener/index.ts

@@ -1 +0,0 @@
-export * from './useEventListener'

package/src/useEventListener/useEventListener.ts

@@ -1,121 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-import type { RefObject } from 'react'
-
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect'
-
-// MediaQueryList Event based useEventListener interface
-function useEventListener<K extends keyof MediaQueryListEventMap>(
-  eventName: K,
-  handler: (event: MediaQueryListEventMap[K]) => void,
-  element: RefObject<MediaQueryList>,
-  options?: boolean | AddEventListenerOptions,
-): void
-
-// Window Event based useEventListener interface
-function useEventListener<K extends keyof WindowEventMap>(
-  eventName: K,
-  handler: (event: WindowEventMap[K]) => void,
-  element?: undefined,
-  options?: boolean | AddEventListenerOptions,
-): void
-
-// Element Event based useEventListener interface
-function useEventListener<
-  K extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
-  T extends Element = K extends keyof HTMLElementEventMap
-    ? HTMLDivElement
-    : SVGElement,
->(
-  eventName: K,
-  handler:
-    | ((event: HTMLElementEventMap[K]) => void)
-    | ((event: SVGElementEventMap[K]) => void),
-  element: RefObject<T>,
-  options?: boolean | AddEventListenerOptions,
-): void
-
-// Document Event based useEventListener interface
-function useEventListener<K extends keyof DocumentEventMap>(
-  eventName: K,
-  handler: (event: DocumentEventMap[K]) => void,
-  element: RefObject<Document>,
-  options?: boolean | AddEventListenerOptions,
-): void
-
-/**
- * Custom hook that attaches event listeners to DOM elements, the window, or media query lists.
- * @template KW - The type of event for window events.
- * @template KH - The type of event for HTML or SVG element events.
- * @template KM - The type of event for media query list events.
- * @template T - The type of the DOM element (default is `HTMLElement`).
- * @param {KW | KH | KM} eventName - The name of the event to listen for.
- * @param {(event: WindowEventMap[KW] | HTMLElementEventMap[KH] | SVGElementEventMap[KH] | MediaQueryListEventMap[KM] | Event) => void} handler - The event handler function.
- * @param {RefObject<T>} [element] - The DOM element or media query list to attach the event listener to (optional).
- * @param {boolean | AddEventListenerOptions} [options] - An options object that specifies characteristics about the event listener (optional).
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-event-listener)
- * @example
- * ```tsx
- * // Example 1: Attach a window event listener
- * useEventListener('resize', handleResize);
- * ```
- * @example
- * ```tsx
- * // Example 2: Attach a document event listener with options
- * const elementRef = useRef(document);
- * useEventListener('click', handleClick, elementRef, { capture: true });
- * ```
- * @example
- * ```tsx
- * // Example 3: Attach an element event listener
- * const buttonRef = useRef<HTMLButtonElement>(null);
- * useEventListener('click', handleButtonClick, buttonRef);
- * ```
- */
-function useEventListener<
-  KW extends keyof WindowEventMap,
-  KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
-  KM extends keyof MediaQueryListEventMap,
-  T extends HTMLElement | SVGAElement | MediaQueryList = HTMLElement,
->(
-  eventName: KW | KH | KM,
-  handler: (
-    event:
-      | WindowEventMap[KW]
-      | HTMLElementEventMap[KH]
-      | SVGElementEventMap[KH]
-      | MediaQueryListEventMap[KM]
-      | Event,
-  ) => void,
-  element?: RefObject<T>,
-  options?: boolean | AddEventListenerOptions,
-) {
-  // Create a ref that stores handler
-  const savedHandler = useRef(handler)
-
-  useIsomorphicLayoutEffect(() => {
-    savedHandler.current = handler
-  }, [handler])
-
-  useEffect(() => {
-    // Define the listening target
-    const targetElement: T | Window = element?.current ?? window
-
-    if (!(targetElement && targetElement.addEventListener)) return
-
-    // Create event listener that calls handler function stored in ref
-    const listener: typeof handler = event => {
-      savedHandler.current(event)
-    }
-
-    targetElement.addEventListener(eventName, listener, options)
-
-    // Remove event listener on cleanup
-    return () => {
-      targetElement.removeEventListener(eventName, listener, options)
-    }
-  }, [eventName, element, options])
-}
-
-export { useEventListener }

package/src/useHover/index.ts

@@ -1 +0,0 @@
-export * from './useHover'

package/src/useHover/useHover.ts

@@ -1,37 +0,0 @@
-import { useState } from 'react'
-
-import type { RefObject } from 'react'
-
-import { useEventListener } from '../useEventListener'
-
-/**
- * Custom hook that tracks whether a DOM element is being hovered over.
- * @template T - The type of the DOM element. Defaults to `HTMLElement`.
- * @param {RefObject<T>} elementRef - The ref object for the DOM element to track.
- * @returns {boolean} A boolean value indicating whether the element is being hovered over.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-hover)
- * @example
- * ```tsx
- * const buttonRef = useRef<HTMLButtonElement>(null);
- * const isHovered = useHover(buttonRef);
- * // Access the isHovered variable to determine if the button is being hovered over.
- * ```
- */
-export function useHover<T extends HTMLElement = HTMLElement>(
-  elementRef: RefObject<T>,
-): boolean {
-  const [value, setValue] = useState<boolean>(false)
-
-  const handleMouseEnter = () => {
-    setValue(true)
-  }
-  const handleMouseLeave = () => {
-    setValue(false)
-  }
-
-  useEventListener('mouseenter', handleMouseEnter, elementRef)
-  useEventListener('mouseleave', handleMouseLeave, elementRef)
-
-  return value
-}

package/src/useIntersectionObserver/index.ts

@@ -1 +0,0 @@
-export * from './useIntersectionObserver'

package/src/useIntersectionObserver/useIntersectionObserver.ts

@@ -1,186 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-/** The hook internal state. */
-type State = {
-  /** A boolean indicating if the element is intersecting. */
-  isIntersecting: boolean
-  /** The intersection observer entry. */
-  entry?: IntersectionObserverEntry
-}
-
-/** Represents the options for configuring the Intersection Observer. */
-type UseIntersectionObserverOptions = {
-  /**
-   * The element that is used as the viewport for checking visibility of the target.
-   * @default null
-   */
-  root?: Element | Document | null
-  /**
-   * A margin around the root.
-   * @default '0%'
-   */
-  rootMargin?: string
-  /**
-   * A threshold indicating the percentage of the target's visibility needed to trigger the callback.
-   * @default 0
-   */
-  threshold?: number | number[]
-  /**
-   * If true, freezes the intersection state once the element becomes visible.
-   * @default false
-   */
-  freezeOnceVisible?: boolean
-  /**
-   * A callback function to be invoked when the intersection state changes.
-   * @param {boolean} isIntersecting - A boolean indicating if the element is intersecting.
-   * @param {IntersectionObserverEntry} entry - The intersection observer Entry.
-   * @default undefined
-   */
-  onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void
-  /**
-   * The initial state of the intersection.
-   * @default false
-   */
-  initialIsIntersecting?: boolean
-}
-
-/**
- * The return type of the useIntersectionObserver hook.
- *
- * Supports both tuple and object destructing.
- * @param {(node: Element | null) => void} ref - The ref callback function.
- * @param {boolean} isIntersecting - A boolean indicating if the element is intersecting.
- * @param {IntersectionObserverEntry | undefined} entry - The intersection observer Entry.
- */
-type IntersectionReturn = [
-  (node?: Element | null) => void,
-  boolean,
-  IntersectionObserverEntry | undefined,
-] & {
-  ref: (node?: Element | null) => void
-  isIntersecting: boolean
-  entry?: IntersectionObserverEntry
-}
-
-/**
- * Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
- * @param {UseIntersectionObserverOptions} options - The options for the Intersection Observer.
- * @returns {IntersectionReturn} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
- * @example
- * ```tsx
- * // Example 1
- * const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });
- * ```
- *
- * ```tsx
- * // Example 2
- * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
- * ```
- */
-export function useIntersectionObserver({
-  threshold = 0,
-  root = null,
-  rootMargin = '0%',
-  freezeOnceVisible = false,
-  initialIsIntersecting = false,
-  onChange,
-}: UseIntersectionObserverOptions = {}): IntersectionReturn {
-  const [ref, setRef] = useState<Element | null>(null)
-
-  const [state, setState] = useState<State>(() => ({
-    isIntersecting: initialIsIntersecting,
-    entry: undefined,
-  }))
-
-  const callbackRef = useRef<UseIntersectionObserverOptions['onChange']>(null)
-
-  callbackRef.current = onChange
-
-  const frozen = state.entry?.isIntersecting && freezeOnceVisible
-
-  useEffect(() => {
-    // Ensure we have a ref to observe
-    if (!ref) return
-
-    // Ensure the browser supports the Intersection Observer API
-    if (!('IntersectionObserver' in window)) return
-
-    // Skip if frozen
-    if (frozen) return
-
-    let unobserve: (() => void) | undefined
-
-    const observer = new IntersectionObserver(
-      (entries: IntersectionObserverEntry[]): void => {
-        const thresholds = Array.isArray(observer.thresholds)
-          ? observer.thresholds
-          : [observer.thresholds]
-
-        entries.forEach(entry => {
-          const isIntersecting =
-            entry.isIntersecting &&
-            thresholds.some(threshold => entry.intersectionRatio >= threshold)
-
-          setState({ isIntersecting, entry })
-
-          if (callbackRef.current) {
-            callbackRef.current(isIntersecting, entry)
-          }
-
-          if (isIntersecting && freezeOnceVisible && unobserve) {
-            unobserve()
-            unobserve = undefined
-          }
-        })
-      },
-      { threshold, root, rootMargin },
-    )
-
-    observer.observe(ref)
-
-    return () => {
-      observer.disconnect()
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    ref,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(threshold),
-    root,
-    rootMargin,
-    frozen,
-    freezeOnceVisible,
-  ])
-
-  // ensures that if the observed element changes, the intersection observer is reinitialized
-  const prevRef = useRef<Element | null>(null)
-
-  useEffect(() => {
-    if (
-      !ref &&
-      state.entry?.target &&
-      !freezeOnceVisible &&
-      !frozen &&
-      prevRef.current !== state.entry.target
-    ) {
-      prevRef.current = state.entry.target
-      setState({ isIntersecting: initialIsIntersecting, entry: undefined })
-    }
-  }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting])
-
-  const result = [
-    setRef,
-    !!state.isIntersecting,
-    state.entry,
-  ] as IntersectionReturn
-
-  // Support object destructuring, by adding the specific values.
-  result.ref = result[0]
-  result.isIntersecting = result[1]
-  result.entry = result[2]
-
-  return result
-}

package/src/useInterval/index.ts

@@ -1 +0,0 @@
-export * from './useInterval'

package/src/useInterval/useInterval.ts

@@ -1,43 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect'
-
-/**
- * Custom hook that creates an interval that invokes a callback function at a specified delay using the [`setInterval API`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval).
- * @param {() => void} callback - The function to be invoked at each interval.
- * @param {number | null} delay - The time, in milliseconds, between each invocation of the callback. Use `null` to clear the interval.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-interval)
- * @example
- * ```tsx
- * const handleInterval = () => {
- *   // Code to be executed at each interval
- * };
- * useInterval(handleInterval, 1000);
- * ```
- */
-export function useInterval(callback: () => void, delay: number | null) {
-  const savedCallback = useRef(callback)
-
-  // Remember the latest callback if it changes.
-  useIsomorphicLayoutEffect(() => {
-    savedCallback.current = callback
-  }, [callback])
-
-  // Set up the interval.
-  useEffect(() => {
-    // Don't schedule if no delay is specified.
-    // Note: 0 is a valid value for delay.
-    if (delay === null) {
-      return
-    }
-
-    const id = setInterval(() => {
-      savedCallback.current()
-    }, delay)
-
-    return () => {
-      clearInterval(id)
-    }
-  }, [delay])
-}

package/src/useIsClient/index.ts

@@ -1 +0,0 @@
-export * from './useIsClient'

package/src/useIsClient/useIsClient.ts

@@ -1,22 +0,0 @@
-import { useEffect, useState } from 'react'
-
-/**
- * Custom hook that determines if the code is running on the client side (in the browser).
- * @returns {boolean} A boolean value indicating whether the code is running on the client side.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-is-client)
- * @example
- * ```tsx
- * const isClient = useIsClient();
- * // Use isClient to conditionally render or execute code specific to the client side.
- * ```
- */
-export function useIsClient() {
-  const [isClient, setClient] = useState(false)
-
-  useEffect(() => {
-    setClient(true)
-  }, [])
-
-  return isClient
-}

package/src/useIsMobile/index.ts

@@ -1,2 +0,0 @@
-export * from './useIsMobile'
-export type * from './types'

package/src/useIsMobile/types.ts

@@ -1,3 +0,0 @@
-export interface IUseIsMobileParams {
-  mobileBreakpoint?: number;
-}

package/src/useIsMobile/useIsMobile.tsx

@@ -1,23 +0,0 @@
-import * as React from "react"
-import { IUseIsMobileParams } from './types';
-
-const DEFAULT_MOBILE_BREAKPOINT = 768
-
-export function useIsMobile(params: IUseIsMobileParams = {}) {
-  const {
-    mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT
-  } = params;
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < mobileBreakpoint)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < mobileBreakpoint)
-    return () => mql.removeEventListener("change", onChange)
-  }, [mobileBreakpoint])
-
-  return !!isMobile
-}

package/src/useIsMounted/index.ts

@@ -1 +0,0 @@
-export * from './useIsMounted'

package/src/useIsMounted/useIsMounted.ts

@@ -1,15 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-
-export function useIsMounted(): () => boolean {
-  const isMounted = useRef(false)
-
-  useEffect(() => {
-    isMounted.current = true
-
-    return () => {
-      isMounted.current = false
-    }
-  }, [])
-
-  return useCallback(() => isMounted.current, [])
-}

package/src/useIsomorphicLayoutEffect/index.ts

@@ -1 +0,0 @@
-export * from './useIsomorphicLayoutEffect'

package/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts

@@ -1,17 +0,0 @@
-import { useEffect, useLayoutEffect } from 'react'
-
-/**
- * Custom hook that uses either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
- * @param {Function} effect - The effect function to be executed.
- * @param {Array<any>} [dependencies] - An array of dependencies for the effect (optional).
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
- * @example
- * ```tsx
- * useIsomorphicLayoutEffect(() => {
- *   // Code to be executed during the layout phase on the client side
- * }, [dependency1, dependency2]);
- * ```
- */
-export const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/useLocalStorage/index.ts

@@ -1 +0,0 @@
-export * from './useLocalStorage'