Merge main and updates

Author: tylermcginnis

README.md

@@ -2,7 +2,9 @@
 
 # useHooks
 
-A collection of modern, server-safe React hooks – from the ui.dev team
+A collection of modern, server-safe React hooks – from the [ui.dev](https://ui.dev) team.
+
+Compatible with React v18.0.0+.
 
 ## Standard
 
@@ -13,12 +15,12 @@ A collection of modern, server-safe React hooks – from the ui.dev team
 ### Hooks
 
 - [useBattery](https://usehooks.com/usebattery)
-- [useClickAway](https://usehooks.com/useclickAway)
+- [useClickAway](https://usehooks.com/useclickaway)
 - [useCopyToClipboard](https://usehooks.com/usecopytoclipboard)
 - [useCounter](https://usehooks.com/usecounter)
 - [useDebounce](https://usehooks.com/usedebounce)
 - [useDefault](https://usehooks.com/usedefault)
-- [useDocumentTitle](https://usehooks.com/usedocumentTitle)
+- [useDocumentTitle](https://usehooks.com/usedocumenttitle)
 - [useFavicon](https://usehooks.com/usefavicon)
 - [useGeolocation](https://usehooks.com/usegeolocation)
 - [useHistoryState](https://usehooks.com/usehistoryState)

index.d.ts

@@ -0,0 +1,255 @@
+import * as React from "react";
+
+export type BatteryManager = {
+  supported: boolean;
+  loading: boolean;
+  level: number | null;
+  charging: boolean | null;
+  chargingTime: number | null;
+  dischargingTime: number | null;
+};
+
+export type GeolocationState = {
+  loading: boolean;
+  accuracy: number | null;
+  altitude: number | null;
+  altitudeAccuracy: number | null;
+  heading: number | null;
+  latitude: number | null;
+  longitude: number | null;
+  speed: number | null;
+  timestamp: number | null;
+  error: GeolocationPositionError | null;
+};
+
+export type HistoryState<T> = {
+  state: T;
+  set: (newPresent: T) => void;
+  undo: () => void;
+  redo: () => void;
+  clear: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+};
+
+export type LongPressOptions = {
+  threshold?: number;
+  onStart?: (e: Event) => void;
+  onFinish?: (e: Event) => void;
+  onCancel?: (e: Event) => void;
+};
+
+export type LongPressFns = {
+  onMouseDown: (e: React.MouseEvent) => void;
+  onMouseUp: (e: React.MouseEvent) => void;
+  onMouseLeave: (e: React.MouseEvent) => void;
+  onTouchStart: (e: React.TouchEvent) => void;
+  onTouchEnd: (e: React.TouchEvent) => void;
+};
+
+export type MousePosition = {
+  x: number;
+  y: number;
+  elementX: number;
+  elementY: number;
+  elementPositionX: number;
+  elementPositionY: number;
+};
+
+export type NetworkState = {
+  online: boolean;
+  downlink: number | null;
+  downlinkMax: number | null;
+  effectiveType: string | null;
+  rtt: number | null;
+  saveData: boolean | null;
+  type: string | null;
+};
+
+export type CustomList<T> = {
+  set: (l: T[]) => void;
+  push: (element: T) => void;
+  removeAt: (index: number) => void;
+  insertAt: (index: number, element: T) => void;
+  updateAt: (index: number, element: T) => void;
+  clear: () => void;
+};
+
+export type CustomQueue<T> = {
+  add: (element: T) => void;
+  remove: () => T | undefined;
+  clear: () => void;
+  first: T | undefined;
+  last: T | undefined;
+  size: number;
+};
+
+export type RenderInfo = {
+  name: string;
+  renders: number;
+  sinceLastRender: number;
+  timestamp: number;
+};
+
+export type SpeechOptions = {
+  lang?: string;
+  voice?: {
+    lang?: string;
+    name?: string;
+  };
+  rate?: number;
+  pitch?: number;
+  volume?: number;
+};
+
+export type SpeechState = {
+  isPlaying: boolean;
+  status: "init" | "play" | "pause" | "stop";
+  lang: string;
+  voiceInfo: {
+    lang: string;
+    name: string;
+  };
+  rate: number;
+  pitch: number;
+  volume: number;
+};
+
+declare module "@uidotdev/usehooks" {
+  export function useBattery(): BatteryManager;
+
+  export function useClickAway<T extends Element>(
+    cb: (e: Event) => void
+  ): React.MutableRefObject<T>;
+
+  export function useCopyToClipboard(): [
+    {
+      error: Error | null;
+      text: string | null;
+    },
+    (value: string) => Promise<void>
+  ];
+
+  export function useCounter(
+    startingValue?: number,
+    options?: {
+      min?: number;
+      max?: number;
+    }
+  ): [
+    number,
+    {
+      increment: () => void;
+      decrement: () => void;
+      set: (nextCount: number) => void;
+      reset: () => void;
+    }
+  ];
+
+  export function useDebounce<T>(value: T, delay: number): T;
+
+  export function useDefault<T>(
+    initialValue: T,
+    defaultValue: T
+  ): [T, React.Dispatch<React.SetStateAction<T>>];
+
+  export function useDocumentTitle(title: string): void;
+
+  export function useFavicon(url: string): void;
+
+  export function useGeolocation(options?: PositionOptions): GeolocationState;
+
+  export function useHistoryState<T>(initialPresent?: T): HistoryState<T>;
+
+  export function useHover<T extends Element>(): [
+    React.MutableRefObject<T>,
+    boolean
+  ];
+
+  export function useIdle(ms?: number): boolean;
+
+  export function useIntersectionObserver(
+    options?: IntersectionObserverInit
+  ): [React.MutableRefObject<Element>, IntersectionObserverEntry | null];
+
+  export function useIsClient(): boolean;
+
+  export function useIsFirstRender(): boolean;
+
+  export function useList<T>(defaultList?: T[]): [T[], CustomList<T>];
+
+  export function useLockBodyScroll(): void;
+
+  export function useLongPress(
+    callback: (e: Event) => void,
+    options?: LongPressOptions
+  ): LongPressFns;
+
+  export function useMap<T>(initialState?: T): Map<T, any>;
+
+  export function useMeasure<T extends Element>(): [
+    React.MutableRefObject<T>,
+    {
+      width: number | null;
+      height: number | null;
+    }
+  ];
+
+  export function useMediaQuery(query: string): boolean;
+
+  export function useMouse<T extends Element>(): [
+    MousePosition,
+    React.MutableRefObject<T>
+  ];
+
+  export function useNetworkState(): NetworkState;
+
+  export function useObjectState<T>(initialValue: T): [T, (arg: T) => void];
+
+  export function useOrientation(): {
+    angle: number;
+    type: string;
+  };
+
+  export function usePreferredLanguage(): string;
+
+  export function usePrevious<T>(newValue: T): T;
+
+  export function useQueue<T>(initialValue?: T[]): CustomQueue<T>;
+
+  export function useRenderCount(): number;
+
+  export function useRenderInfo(name?: string): RenderInfo | undefined;
+
+  export function useScript(
+    src: string,
+    options?: {
+      removeOnUnmount?: boolean;
+    }
+  ): "idle" | "loading" | "ready" | "error";
+
+  export function useSet<T>(values?: T[]): Set<T>;
+
+  export function useSpeech(text: string, options?: SpeechOptions): SpeechState;
+
+  export function useThrottle<T>(value: T, delay: number): T;
+
+  export function useToggle(
+    initialValue?: boolean
+  ): [boolean, (newValue?: boolean) => void];
+
+  export function useVisibilityChange(): boolean;
+
+  export function useWindowScroll(): [
+    {
+      x: number | null;
+      y: number | null;
+    },
+    (args: unknown) => void
+  ];
+
+  export function useWindowSize(): {
+    width: number | null;
+    height: number | null;
+  };
+}

index.js

@@ -109,6 +109,10 @@ export function useClickAway(cb) {
   const ref = React.useRef(null);
   const refCb = React.useRef(cb);
 
+  React.useLayoutEffect(() => {
+    refCb.current = cb;
+  });
+
   React.useEffect(() => {
     const handler = (e) => {
       const element = ref.current;
@@ -163,20 +167,27 @@ export function useCopyToClipboard() {
   return [state, copyToClipboard];
 }
 
-export function useContinuousRetry(callback, interval = 100) {
+export function useContinuousRetry(callback, interval = 100, options = {}) {
+  const { maxRetries = Infinity } = options;
   const [hasResolved, setHasResolved] = React.useState(false);
   const onInterval = React.useEffectEvent(callback);
 
   React.useEffect(() => {
+    let retries = 0;
+
     const id = window.setInterval(() => {
       if (onInterval()) {
         setHasResolved(true);
         window.clearInterval(id);
+      } else if (retries >= maxRetries) {
+        window.clearInterval(id);
+      } else {
+        retries += 1;
       }
     }, interval);
 
     return () => window.clearInterval(id);
-  }, [interval]);
+  }, [interval, maxRetries]);
 
   return hasResolved;
 }
@@ -820,11 +831,7 @@ export function useLocalStorage(key, initialValue) {
     [key, localState]
   );
 
-  const onStorageChange = React.useEffectEvent((event) => {
-    if (event?.key && event.key !== key) {
-      return;
-    }
-
+  const onStorageChange = React.useEffectEvent(() => {
     setLocalState(readValue());
   });
 
@@ -875,7 +882,6 @@ export function useLogger(name, ...rest) {
   }, []);
 }
 
-
 export function useLongPress(
   callback,
   { threshold = 400, onStart, onFinish, onCancel } = {}
@@ -885,6 +891,10 @@ export function useLongPress(
   const timerId = React.useRef();
   const cbRef = React.useRef(callback);
 
+  React.useLayoutEffect(() => {
+    cbRef.current = callback;
+  });
+
   const start = React.useCallback(
     () => (event) => {
       if (isPressed.current) return;
@@ -1080,8 +1090,6 @@ export function useMouse() {
   return [state, ref];
 }
 
-
-
 export function useNetworkState() {
   const connection =
     navigator?.connection ||
@@ -1313,6 +1321,7 @@ export function useQueue(initialValue = []) {
     first: queue[0],
     last: queue[queue.length - 1],
     size: queue.length,
+    queue,
   };
 }
 
@@ -1383,11 +1392,7 @@ export function useSessionStorage(key, initialValue) {
     [key, localState]
   );
 
-  const onStorageChange = React.useEffectEvent((event) => {
-    if (event?.key && event.key !== key) {
-      return;
-    }
-
+  const onStorageChange = React.useEffectEvent(() => {
     setLocalState(readValue());
   });
 
@@ -1615,6 +1620,7 @@ export function useVisibilityChange() {
         setDocumentVisibility(true);
       }
     };
+    handleChange();
 
     document.addEventListener("visibilitychange", handleChange);