Merge pull request #206 from toystars/typescript-declarations

Add Typescript types definition for all hooks

Author: tylermcginnis

index.d.ts

@@ -0,0 +1,238 @@
+import 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>;
+
+  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;
+  };
+}

package-lock.json

@@ -6,7 +6,8 @@
   "repository": "uidotdev/usehooks",
   "devDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.6"
   },
   "exports": {
     "default": "./index.js"

package.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noImplicitAny": true,
+    "allowJs": true
+  }
+}