Repository: uidotdev/usehooks
Branch: main
Commit: 945436df0037
Files: 104
Total size: 262.1 KB

Directory structure:
gitextract_24ko9djh/

├── .gitignore
├── LICENSE
├── README.md
├── index.d.ts
├── index.js
├── package.json
├── tsconfig.json
└── usehooks.com/
    ├── .astro/
    │   └── types.d.ts
    ├── .eslintrc.json
    ├── .gitignore
    ├── .prettierrc
    ├── README.md
    ├── astro.config.mjs
    ├── generate-og-images.mjs
    ├── package.json
    ├── src/
    │   ├── components/
    │   │   ├── Button.astro
    │   │   ├── CodePreview.astro
    │   │   ├── CountdownTimer.tsx
    │   │   ├── HookDescription.astro
    │   │   ├── Install.astro
    │   │   ├── Logo.astro
    │   │   ├── LogoGithub.astro
    │   │   ├── QueryGGBanner.astro
    │   │   ├── RelatedHook.astro
    │   │   ├── StaticCodeContainer.astro
    │   │   ├── Svg.astro
    │   │   ├── codepreview/
    │   │   │   ├── CodePreview.tsx
    │   │   │   ├── CodeWrapper.tsx
    │   │   │   └── utils.ts
    │   │   └── search/
    │   │       ├── Callout.module.css
    │   │       ├── Callout.tsx
    │   │       ├── HookCard.module.css
    │   │       ├── HookCard.tsx
    │   │       ├── HookSearch.module.css
    │   │       ├── HookSearch.tsx
    │   │       ├── HookSort.module.css
    │   │       ├── HookSort.tsx
    │   │       ├── HooksList.module.css
    │   │       └── HooksList.tsx
    │   ├── content/
    │   │   ├── config.ts
    │   │   └── hooks/
    │   │       ├── useBattery.mdx
    │   │       ├── useClickAway.mdx
    │   │       ├── useContinuousRetry.mdx
    │   │       ├── useCopyToClipboard.mdx
    │   │       ├── useCountdown.mdx
    │   │       ├── useCounter.mdx
    │   │       ├── useDebounce.mdx
    │   │       ├── useDefault.mdx
    │   │       ├── useDocumentTitle.mdx
    │   │       ├── useEventListener.mdx
    │   │       ├── useFavicon.mdx
    │   │       ├── useFetch.mdx
    │   │       ├── useGeolocation.mdx
    │   │       ├── useHistoryState.mdx
    │   │       ├── useHover.mdx
    │   │       ├── useIdle.mdx
    │   │       ├── useIntersectionObserver.mdx
    │   │       ├── useInterval.mdx
    │   │       ├── useIntervalWhen.mdx
    │   │       ├── useIsClient.mdx
    │   │       ├── useIsFirstRender.mdx
    │   │       ├── useKeyPress.mdx
    │   │       ├── useList.mdx
    │   │       ├── useLocalStorage.mdx
    │   │       ├── useLockBodyScroll.mdx
    │   │       ├── useLogger.mdx
    │   │       ├── useLongPress.mdx
    │   │       ├── useMap.mdx
    │   │       ├── useMeasure.mdx
    │   │       ├── useMediaQuery.mdx
    │   │       ├── useMouse.mdx
    │   │       ├── useNetworkState.mdx
    │   │       ├── useObjectState.mdx
    │   │       ├── useOrientation.mdx
    │   │       ├── usePageLeave.mdx
    │   │       ├── usePreferredLanguage.mdx
    │   │       ├── usePrevious.mdx
    │   │       ├── useQueue.mdx
    │   │       ├── useRandomInterval.mdx
    │   │       ├── useRenderCount.mdx
    │   │       ├── useRenderInfo.mdx
    │   │       ├── useScript.mdx
    │   │       ├── useSessionStorage.mdx
    │   │       ├── useSet.mdx
    │   │       ├── useThrottle.mdx
    │   │       ├── useTimeout.mdx
    │   │       ├── useToggle.mdx
    │   │       ├── useVisibilityChange.mdx
    │   │       ├── useWindowScroll.mdx
    │   │       └── useWindowSize.mdx
    │   ├── env.d.ts
    │   ├── layouts/
    │   │   └── Layout.astro
    │   ├── pages/
    │   │   ├── 404.astro
    │   │   ├── [hook].astro
    │   │   └── index.astro
    │   ├── sections/
    │   │   ├── Footer.astro
    │   │   ├── HomeHero.astro
    │   │   ├── NavInternal.astro
    │   │   └── NavMain.astro
    │   └── styles/
    │       └── globals.css
    ├── tailwind.config.cjs
    ├── theme.json
    ├── tsconfig.json
    └── vercel.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# dotenv environment variables file
.env


# Mac files
.DS_Store



================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2023 ui.dev

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
![useHooks](https://usehooks.com/meta/og.jpg)

# useHooks

A collection of modern, server-safe React hooks – from the [ui.dev](https://ui.dev) team.

Compatible with React v18.0.0+.

## Standard

### Install

`npm i @uidotdev/usehooks`

### Hooks

- [useBattery](https://usehooks.com/usebattery)
- [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)
- [useFavicon](https://usehooks.com/usefavicon)
- [useGeolocation](https://usehooks.com/usegeolocation)
- [useHistoryState](https://usehooks.com/usehistorystate)
- [useHover](https://usehooks.com/usehover)
- [useIdle](https://usehooks.com/useidle)
- [useIntersectionObserver](https://usehooks.com/useintersectionobserver)
- [useIsClient](https://usehooks.com/useisclient)
- [useIsFirstRender](https://usehooks.com/useisfirstrender)
- [useList](https://usehooks.com/uselist)
- [useLocalStorage](https://usehooks.com/uselocalstorage)
- [useLockBodyScroll](https://usehooks.com/uselockbodyscroll)
- [useLongPress](https://usehooks.com/uselongpress)
- [useMap](https://usehooks.com/usemap)
- [useMeasure](https://usehooks.com/usemeasure)
- [useMediaQuery](https://usehooks.com/usemediaquery)
- [useMouse](https://usehooks.com/usemouse)
- [useNetworkState](https://usehooks.com/usenetworkstate)
- [useObjectState](https://usehooks.com/useobjectstate)
- [useOrientation](https://usehooks.com/useorientation)
- [usePreferredLanguage](https://usehooks.com/usepreferredlanguage)
- [usePrevious](https://usehooks.com/useprevious)
- [useQueue](https://usehooks.com/usequeue)
- [useRenderCount](https://usehooks.com/userendercount)
- [useRenderInfo](https://usehooks.com/userenderinfo)
- [useScript](https://usehooks.com/usescript)
- [useSessionStorage](https://usehooks.com/usesessionstorage)
- [useSet](https://usehooks.com/useset)
- [useThrottle](https://usehooks.com/usethrottle)
- [useToggle](https://usehooks.com/usetoggle)
- [useVisibilityChange](https://usehooks.com/usevisibilitychange)
- [useWindowScroll](https://usehooks.com/usewindowscroll)
- [useWindowSize](https://usehooks.com/usewindowsize)

## Experimental

### Install

`npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental`

### Hooks

- [useContinuousRetry](https://usehooks.com/usecontinuousretry)
- [useCountdown](https://usehooks.com/usecountdown)
- [useEventListener](https://usehooks.com/useeventlistener)
- [useFetch](https://usehooks.com/usefetch)
- [useInterval](https://usehooks.com/useinterval)
- [useIntervalWhen](https://usehooks.com/useintervalwhen)
- [useKeyPress](https://usehooks.com/usekeypress)
- [useLogger](https://usehooks.com/uselogger)
- [usePageLeave](https://usehooks.com/usepageleave)
- [useRandomInterval](https://usehooks.com/userandominterval)
- [useTimeout](https://usehooks.com/usetimeout)


================================================
FILE: index.d.ts
================================================
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;
  queue: T[];
};

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(): [
    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.RefCallback<T>,
    boolean
  ];

  export function useIdle(ms?: number): boolean;

  export function useIntersectionObserver<T extends Element>(
    options?: IntersectionObserverInit
  ): [React.RefCallback<T>, IntersectionObserverEntry | null];

  export function useIsClient(): boolean;

  export function useIsFirstRender(): boolean;

  export function useList<T>(defaultList?: T[]): [T[], CustomList<T>];

  export function useLocalStorage<T>(
    key: string,
    initialValue?: T
  ): [T, React.Dispatch<React.SetStateAction<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.RefCallback<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;
    }
  ): "unknown" | "loading" | "ready" | "error";

  export function useSessionStorage<T>(
    key: string,
    initialValue: T
  ): [T, React.Dispatch<React.SetStateAction<T>>];

  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;
  };
}


================================================
FILE: index.js
================================================
import * as React from "react";

function isShallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }

  return true;
}

function isTouchEvent({ nativeEvent }) {
  return window.TouchEvent
    ? nativeEvent instanceof TouchEvent
    : "touches" in nativeEvent;
}

function isMouseEvent(event) {
  return event.nativeEvent instanceof MouseEvent;
}

function throttle(cb, ms) {
  let lastTime = 0;
  return () => {
    const now = Date.now();
    if (now - lastTime >= ms) {
      cb();
      lastTime = now;
    }
  };
}

function isPlainObject(value) {
  return Object.prototype.toString.call(value) === "[object Object]";
}

function dispatchStorageEvent(key, newValue) {
  window.dispatchEvent(new StorageEvent("storage", { key, newValue }));
}

export function useBattery() {
  const [state, setState] = React.useState({
    supported: true,
    loading: true,
    level: null,
    charging: null,
    chargingTime: null,
    dischargingTime: null,
  });

  React.useEffect(() => {
    if (!navigator.getBattery) {
      setState((s) => ({
        ...s,
        supported: false,
        loading: false,
      }));
      return;
    }

    let battery = null;

    const handleChange = () => {
      setState({
        supported: true,
        loading: false,
        level: battery.level,
        charging: battery.charging,
        chargingTime: battery.chargingTime,
        dischargingTime: battery.dischargingTime,
      });
    };

    navigator.getBattery().then((b) => {
      battery = b;
      handleChange();

      b.addEventListener("levelchange", handleChange);
      b.addEventListener("chargingchange", handleChange);
      b.addEventListener("chargingtimechange", handleChange);
      b.addEventListener("dischargingtimechange", handleChange);
    });

    return () => {
      if (battery) {
        battery.removeEventListener("levelchange", handleChange);
        battery.removeEventListener("chargingchange", handleChange);
        battery.removeEventListener("chargingtimechange", handleChange);
        battery.removeEventListener("dischargingtimechange", handleChange);
      }
    };
  }, []);

  return state;
}

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;
      if (element && !element.contains(e.target)) {
        refCb.current(e);
      }
    };

    document.addEventListener("mousedown", handler);
    document.addEventListener("touchstart", handler);

    return () => {
      document.removeEventListener("mousedown", handler);
      document.removeEventListener("touchstart", handler);
    };
  }, []);

  return ref;
}

function oldSchoolCopy(text) {
  const tempTextArea = document.createElement("textarea");
  tempTextArea.value = text;
  document.body.appendChild(tempTextArea);
  tempTextArea.select();
  document.execCommand("copy");
  document.body.removeChild(tempTextArea);
}

export function useCopyToClipboard() {
  const [state, setState] = React.useState(null);

  const copyToClipboard = React.useCallback((value) => {
    const handleCopy = async () => {
      try {
        if (navigator?.clipboard?.writeText) {
          await navigator.clipboard.writeText(value);
          setState(value);
        } else {
          throw new Error("writeText not supported");
        }
      } catch (e) {
        oldSchoolCopy(value);
        setState(value);
      }
    };

    handleCopy();
  }, []);

  return [state, copyToClipboard];
}

export function useCounter(startingValue = 0, options = {}) {
  const { min, max } = options;

  if (typeof min === "number" && startingValue < min) {
    throw new Error(
      `Your starting value of ${startingValue} is less than your min of ${min}.`
    );
  }

  if (typeof max === "number" && startingValue > max) {
    throw new Error(
      `Your starting value of ${startingValue} is greater than your max of ${max}.`
    );
  }

  const [count, setCount] = React.useState(startingValue);

  const increment = React.useCallback(() => {
    setCount((c) => {
      const nextCount = c + 1;

      if (typeof max === "number" && nextCount > max) {
        return c;
      }

      return nextCount;
    });
  }, [max]);

  const decrement = React.useCallback(() => {
    setCount((c) => {
      const nextCount = c - 1;

      if (typeof min === "number" && nextCount < min) {
        return c;
      }

      return nextCount;
    });
  }, [min]);

  const set = React.useCallback(
    (nextCount) => {
      setCount((c) => {
        if (typeof max === "number" && nextCount > max) {
          return c;
        }

        if (typeof min === "number" && nextCount < min) {
          return c;
        }

        return nextCount;
      });
    },
    [max, min]
  );

  const reset = React.useCallback(() => {
    setCount(startingValue);
  }, [startingValue]);

  return [
    count,
    {
      increment,
      decrement,
      set,
      reset,
    },
  ];
}

export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = React.useState(value);

  React.useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export function useDefault(initialValue, defaultValue) {
  const [state, setState] = React.useState(initialValue);

  if (typeof state === "undefined" || state === null) {
    return [defaultValue, setState];
  }

  return [state, setState];
}

export function useDocumentTitle(title) {
  React.useEffect(() => {
    document.title = title;
  }, [title]);
}

export function useFavicon(url) {
  React.useEffect(() => {
    let link = document.querySelector(`link[rel~="icon"]`);

    if (!link) {
      link = document.createElement("link");
      link.type = "image/x-icon";
      link.rel = "icon";
      link.href = url;
      document.head.appendChild(link);
    } else {
      link.href = url;
    }
  }, [url]);
}

export function useGeolocation(options = {}) {
  const [state, setState] = React.useState({
    loading: true,
    accuracy: null,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    latitude: null,
    longitude: null,
    speed: null,
    timestamp: null,
    error: null,
  });

  const optionsRef = React.useRef(options);

  React.useEffect(() => {
    const onEvent = ({ coords, timestamp }) => {
      setState({
        loading: false,
        timestamp,
        latitude: coords.latitude,
        longitude: coords.longitude,
        altitude: coords.altitude,
        accuracy: coords.accuracy,
        altitudeAccuracy: coords.altitudeAccuracy,
        heading: coords.heading,
        speed: coords.speed,
      });
    };

    const onEventError = (error) => {
      setState((s) => ({
        ...s,
        loading: false,
        error,
      }));
    };

    navigator.geolocation.getCurrentPosition(
      onEvent,
      onEventError,
      optionsRef.current
    );

    const watchId = navigator.geolocation.watchPosition(
      onEvent,
      onEventError,
      optionsRef.current
    );

    return () => {
      navigator.geolocation.clearWatch(watchId);
    };
  }, []);

  return state;
}

const initialUseHistoryStateState = {
  past: [],
  present: null,
  future: [],
};

const useHistoryStateReducer = (state, action) => {
  const { past, present, future } = state;

  if (action.type === "UNDO") {
    return {
      past: past.slice(0, past.length - 1),
      present: past[past.length - 1],
      future: [present, ...future],
    };
  } else if (action.type === "REDO") {
    return {
      past: [...past, present],
      present: future[0],
      future: future.slice(1),
    };
  } else if (action.type === "SET") {
    const { newPresent } = action;

    if (action.newPresent === present) {
      return state;
    }

    return {
      past: [...past, present],
      present: newPresent,
      future: [],
    };
  } else if (action.type === "CLEAR") {
    return {
      ...initialUseHistoryStateState,
      present: action.initialPresent,
    };
  } else {
    throw new Error("Unsupported action type");
  }
};

export function useHistoryState(initialPresent = {}) {
  const initialPresentRef = React.useRef(initialPresent);

  const [state, dispatch] = React.useReducer(useHistoryStateReducer, {
    ...initialUseHistoryStateState,
    present: initialPresentRef.current,
  });

  const canUndo = state.past.length !== 0;
  const canRedo = state.future.length !== 0;

  const undo = React.useCallback(() => {
    if (canUndo) {
      dispatch({ type: "UNDO" });
    }
  }, [canUndo]);

  const redo = React.useCallback(() => {
    if (canRedo) {
      dispatch({ type: "REDO" });
    }
  }, [canRedo]);

  const set = React.useCallback(
    (newPresent) => dispatch({ type: "SET", newPresent }),
    []
  );

  const clear = React.useCallback(
    () =>
      dispatch({ type: "CLEAR", initialPresent: initialPresentRef.current }),
    []
  );

  return { state: state.present, set, undo, redo, clear, canUndo, canRedo };
}

export function useHover() {
  const [hovering, setHovering] = React.useState(false);
  const previousNode = React.useRef(null);

  const handleMouseEnter = React.useCallback(() => {
    setHovering(true);
  }, []);

  const handleMouseLeave = React.useCallback(() => {
    setHovering(false);
  }, []);

  const customRef = React.useCallback(
    (node) => {
      if (previousNode.current?.nodeType === Node.ELEMENT_NODE) {
        previousNode.current.removeEventListener(
          "mouseenter",
          handleMouseEnter
        );
        previousNode.current.removeEventListener(
          "mouseleave",
          handleMouseLeave
        );
      }

      if (node?.nodeType === Node.ELEMENT_NODE) {
        node.addEventListener("mouseenter", handleMouseEnter);
        node.addEventListener("mouseleave", handleMouseLeave);
      }

      previousNode.current = node;
    },
    [handleMouseEnter, handleMouseLeave]
  );

  return [customRef, hovering];
}

export function useIdle(ms = 1000 * 60) {
  const [idle, setIdle] = React.useState(false);

  React.useEffect(() => {
    let timeoutId;

    const handleTimeout = () => {
      setIdle(true);
    };

    const handleEvent = throttle((e) => {
      setIdle(false);

      window.clearTimeout(timeoutId);
      timeoutId = window.setTimeout(handleTimeout, ms);
    }, 500);

    const handleVisibilityChange = () => {
      if (!document.hidden) {
        handleEvent();
      }
    };

    timeoutId = window.setTimeout(handleTimeout, ms);

    window.addEventListener("mousemove", handleEvent);
    window.addEventListener("mousedown", handleEvent);
    window.addEventListener("resize", handleEvent);
    window.addEventListener("keydown", handleEvent);
    window.addEventListener("touchstart", handleEvent);
    window.addEventListener("wheel", handleEvent);
    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      window.removeEventListener("mousemove", handleEvent);
      window.removeEventListener("mousedown", handleEvent);
      window.removeEventListener("resize", handleEvent);
      window.removeEventListener("keydown", handleEvent);
      window.removeEventListener("touchstart", handleEvent);
      window.removeEventListener("wheel", handleEvent);
      document.removeEventListener("visibilitychange", handleVisibilityChange);
      window.clearTimeout(timeoutId);
    };
  }, [ms]);

  return idle;
}

export function useIntersectionObserver(options = {}) {
  const { threshold = 1, root = null, rootMargin = "0px" } = options;
  const [entry, setEntry] = React.useState(null);

  const previousObserver = React.useRef(null);

  const customRef = React.useCallback(
    (node) => {
      if (previousObserver.current) {
        previousObserver.current.disconnect();
        previousObserver.current = null;
      }

      if (node?.nodeType === Node.ELEMENT_NODE) {
        const observer = new IntersectionObserver(
          ([entry]) => {
            setEntry(entry);
          },
          { threshold, root, rootMargin }
        );

        observer.observe(node);
        previousObserver.current = observer;
      }
    },
    [threshold, root, rootMargin]
  );

  return [customRef, entry];
}

export function useIsClient() {
  const [isClient, setIsClient] = React.useState(false);

  React.useEffect(() => {
    setIsClient(true);
  }, []);

  return isClient;
}

export function useIsFirstRender() {
  const renderRef = React.useRef(true);

  if (renderRef.current === true) {
    renderRef.current = false;
    return true;
  }

  return renderRef.current;
}

export function useList(defaultList = []) {
  const [list, setList] = React.useState(defaultList);

  const set = React.useCallback((l) => {
    setList(l);
  }, []);

  const push = React.useCallback((element) => {
    setList((l) => [...l, element]);
  }, []);

  const removeAt = React.useCallback((index) => {
    setList((l) => [...l.slice(0, index), ...l.slice(index + 1)]);
  }, []);

  const insertAt = React.useCallback((index, element) => {
    setList((l) => [...l.slice(0, index), element, ...l.slice(index)]);
  }, []);

  const updateAt = React.useCallback((index, element) => {
    setList((l) => l.map((e, i) => (i === index ? element : e)));
  }, []);

  const clear = React.useCallback(() => setList([]), []);

  return [list, { set, push, removeAt, insertAt, updateAt, clear }];
}

const setLocalStorageItem = (key, value) => {
  const stringifiedValue = JSON.stringify(value);
  window.localStorage.setItem(key, stringifiedValue);
  dispatchStorageEvent(key, stringifiedValue);
};

const removeLocalStorageItem = (key) => {
  window.localStorage.removeItem(key);
  dispatchStorageEvent(key, null);
};

const getLocalStorageItem = (key) => {
  return window.localStorage.getItem(key);
};

const useLocalStorageSubscribe = (callback) => {
  window.addEventListener("storage", callback);
  return () => window.removeEventListener("storage", callback);
};

const getLocalStorageServerSnapshot = () => {
  throw Error("useLocalStorage is a client-only hook");
};

export function useLocalStorage(key, initialValue) {
  const getSnapshot = () => getLocalStorageItem(key);

  const store = React.useSyncExternalStore(
    useLocalStorageSubscribe,
    getSnapshot,
    getLocalStorageServerSnapshot
  );

  const setState = React.useCallback(
    (v) => {
      try {
        const nextState = typeof v === "function" ? v(JSON.parse(store)) : v;

        if (nextState === undefined || nextState === null) {
          removeLocalStorageItem(key);
        } else {
          setLocalStorageItem(key, nextState);
        }
      } catch (e) {
        console.warn(e);
      }
    },
    [key, store]
  );

  React.useEffect(() => {
    if (
      getLocalStorageItem(key) === null &&
      typeof initialValue !== "undefined"
    ) {
      setLocalStorageItem(key, initialValue);
    }
  }, [key, initialValue]);

  return [store ? JSON.parse(store) : initialValue, setState];
}

export function useLockBodyScroll() {
  React.useLayoutEffect(() => {
    const originalStyle = window.getComputedStyle(document.body).overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = originalStyle;
    };
  }, []);
}

export function useLongPress(callback, options = {}) {
  const { threshold = 400, onStart, onFinish, onCancel } = options;
  const isLongPressActive = React.useRef(false);
  const isPressed = React.useRef(false);
  const timerId = React.useRef();

  return React.useMemo(() => {
    if (typeof callback !== "function") {
      return {};
    }

    const start = (event) => {
      if (!isMouseEvent(event) && !isTouchEvent(event)) return;

      if (onStart) {
        onStart(event);
      }

      isPressed.current = true;
      timerId.current = setTimeout(() => {
        callback(event);
        isLongPressActive.current = true;
      }, threshold);
    };

    const cancel = (event) => {
      if (!isMouseEvent(event) && !isTouchEvent(event)) return;

      if (isLongPressActive.current) {
        if (onFinish) {
          onFinish(event);
        }
      } else if (isPressed.current) {
        if (onCancel) {
          onCancel(event);
        }
      }

      isLongPressActive.current = false;
      isPressed.current = false;

      if (timerId.current) {
        window.clearTimeout(timerId.current);
      }
    };

    const mouseHandlers = {
      onMouseDown: start,
      onMouseUp: cancel,
      onMouseLeave: cancel,
    };

    const touchHandlers = {
      onTouchStart: start,
      onTouchEnd: cancel,
    };

    return {
      ...mouseHandlers,
      ...touchHandlers,
    };
  }, [callback, threshold, onCancel, onFinish, onStart]);
}

export function useMap(initialState) {
  const mapRef = React.useRef(new Map(initialState));
  const [, reRender] = React.useReducer((x) => x + 1, 0);

  mapRef.current.set = (...args) => {
    Map.prototype.set.apply(mapRef.current, args);
    reRender();
    return mapRef.current;
  };

  mapRef.current.clear = (...args) => {
    Map.prototype.clear.apply(mapRef.current, args);
    reRender();
  };

  mapRef.current.delete = (...args) => {
    const res = Map.prototype.delete.apply(mapRef.current, args);
    reRender();

    return res;
  };

  return mapRef.current;
}

export function useMeasure() {
  const [dimensions, setDimensions] = React.useState({
    width: null,
    height: null,
  });

  const previousObserver = React.useRef(null);

  const customRef = React.useCallback((node) => {
    if (previousObserver.current) {
      previousObserver.current.disconnect();
      previousObserver.current = null;
    }

    if (node?.nodeType === Node.ELEMENT_NODE) {
      const observer = new ResizeObserver(([entry]) => {
        if (entry && entry.borderBoxSize) {
          const { inlineSize: width, blockSize: height } =
            entry.borderBoxSize[0];

          setDimensions({ width, height });
        }
      });

      observer.observe(node);
      previousObserver.current = observer;
    }
  }, []);

  return [customRef, dimensions];
}

export function useMediaQuery(query) {
  const subscribe = React.useCallback(
    (callback) => {
      const matchMedia = window.matchMedia(query);

      matchMedia.addEventListener("change", callback);
      return () => {
        matchMedia.removeEventListener("change", callback);
      };
    },
    [query]
  );

  const getSnapshot = () => {
    return window.matchMedia(query).matches;
  };

  const getServerSnapshot = () => {
    throw Error("useMediaQuery is a client-only hook");
  };

  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

export function useMouse() {
  const [state, setState] = React.useState({
    x: 0,
    y: 0,
    elementX: 0,
    elementY: 0,
    elementPositionX: 0,
    elementPositionY: 0,
  });

  const ref = React.useRef(null);

  React.useLayoutEffect(() => {
    const handleMouseMove = (event) => {
      let newState = {
        x: event.pageX,
        y: event.pageY,
      };

      if (ref.current?.nodeType === Node.ELEMENT_NODE) {
        const { left, top } = ref.current.getBoundingClientRect();
        const elementPositionX = left + window.scrollX;
        const elementPositionY = top + window.scrollY;
        const elementX = event.pageX - elementPositionX;
        const elementY = event.pageY - elementPositionY;

        newState.elementX = elementX;
        newState.elementY = elementY;
        newState.elementPositionX = elementPositionX;
        newState.elementPositionY = elementPositionY;
      }

      setState((s) => {
        return {
          ...s,
          ...newState,
        };
      });
    };

    document.addEventListener("mousemove", handleMouseMove);

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return [state, ref];
}

const getConnection = () => {
  return (
    navigator?.connection ||
    navigator?.mozConnection ||
    navigator?.webkitConnection
  );
};

const useNetworkStateSubscribe = (callback) => {
  window.addEventListener("online", callback, { passive: true });
  window.addEventListener("offline", callback, { passive: true });

  const connection = getConnection();

  if (connection) {
    connection.addEventListener("change", callback, { passive: true });
  }

  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);

    if (connection) {
      connection.removeEventListener("change", callback);
    }
  };
};

const getNetworkStateServerSnapshot = () => {
  throw Error("useNetworkState is a client-only hook");
};

export function useNetworkState() {
  const cache = React.useRef({});

  const getSnapshot = () => {
    const online = navigator.onLine;
    const connection = getConnection();

    const nextState = {
      online,
      downlink: connection?.downlink,
      downlinkMax: connection?.downlinkMax,
      effectiveType: connection?.effectiveType,
      rtt: connection?.rtt,
      saveData: connection?.saveData,
      type: connection?.type,
    };

    if (isShallowEqual(cache.current, nextState)) {
      return cache.current;
    } else {
      cache.current = nextState;
      return nextState;
    }
  };

  return React.useSyncExternalStore(
    useNetworkStateSubscribe,
    getSnapshot,
    getNetworkStateServerSnapshot
  );
}

export function useObjectState(initialValue) {
  const [state, setState] = React.useState(initialValue);

  const handleUpdate = React.useCallback((arg) => {
    if (typeof arg === "function") {
      setState((s) => {
        const newState = arg(s);

        if (isPlainObject(newState)) {
          return {
            ...s,
            ...newState,
          };
        }
      });
    }

    if (isPlainObject(arg)) {
      setState((s) => ({
        ...s,
        ...arg,
      }));
    }
  }, []);

  return [state, handleUpdate];
}

export function useOrientation() {
  const [orientation, setOrientation] = React.useState({
    angle: 0,
    type: "landscape-primary",
  });

  React.useLayoutEffect(() => {
    const handleChange = () => {
      const { angle, type } = window.screen.orientation;
      setOrientation({
        angle,
        type,
      });
    };

    const handle_orientationchange = () => {
      setOrientation({
        type: "UNKNOWN",
        angle: window.orientation,
      });
    };

    if (window.screen?.orientation) {
      handleChange();
      window.screen.orientation.addEventListener("change", handleChange);
    } else {
      handle_orientationchange();
      window.addEventListener("orientationchange", handle_orientationchange);
    }

    return () => {
      if (window.screen?.orientation) {
        window.screen.orientation.removeEventListener("change", handleChange);
      } else {
        window.removeEventListener(
          "orientationchange",
          handle_orientationchange
        );
      }
    };
  }, []);

  return orientation;
}

const usePreferredLanguageSubscribe = (cb) => {
  window.addEventListener("languagechange", cb);
  return () => window.removeEventListener("languagechange", cb);
};

const getPreferredLanguageSnapshot = () => {
  return navigator.language;
};

const getPreferredLanguageServerSnapshot = () => {
  throw Error("usePreferredLanguage is a client-only hook");
};

export function usePreferredLanguage() {
  return React.useSyncExternalStore(
    usePreferredLanguageSubscribe,
    getPreferredLanguageSnapshot,
    getPreferredLanguageServerSnapshot
  );
}

export function usePrevious(value) {
  const [current, setCurrent] = React.useState(value);
  const [previous, setPrevious] = React.useState(null);

  if (value !== current) {
    setPrevious(current);
    setCurrent(value);
  }

  return previous;
}

export function useQueue(initialValue = []) {
  const [queue, setQueue] = React.useState(initialValue);

  const add = React.useCallback((element) => {
    setQueue((q) => [...q, element]);
  }, []);

  const remove = React.useCallback(() => {
    let removedElement;

    setQueue(([first, ...q]) => {
      removedElement = first;
      return q;
    });

    return removedElement;
  }, []);

  const clear = React.useCallback(() => {
    setQueue([]);
  }, []);

  return {
    add,
    remove,
    clear,
    first: queue[0],
    last: queue[queue.length - 1],
    size: queue.length,
    queue,
  };
}

export function useRenderCount() {
  const count = React.useRef(0);

  count.current++;

  return count.current;
}

export function useRenderInfo(name = "Unknown") {
  const count = React.useRef(0);
  const lastRender = React.useRef();
  const now = Date.now();

  count.current++;

  React.useEffect(() => {
    lastRender.current = Date.now();
  });

  const sinceLastRender = lastRender.current ? now - lastRender.current : 0;

  if (process.env.NODE_ENV !== "production") {
    const info = {
      name,
      renders: count.current,
      sinceLastRender,
      timestamp: now,
    };

    console.log(info);

    return info;
  }
}

export function useScript(src, options = {}) {
  const [status, setStatus] = React.useState("loading");
  const optionsRef = React.useRef(options);

  React.useEffect(() => {
    let script = document.querySelector(`script[src="${src}"]`);

    const domStatus = script?.getAttribute("data-status");
    if (domStatus) {
      setStatus(domStatus);
      return;
    }

    if (script === null) {
      script = document.createElement("script");
      script.src = src;
      script.async = true;
      script.setAttribute("data-status", "loading");
      document.body.appendChild(script);

      const handleScriptLoad = () => {
        script.setAttribute("data-status", "ready");
        setStatus("ready");
        removeEventListeners();
      };

      const handleScriptError = () => {
        script.setAttribute("data-status", "error");
        setStatus("error");
        removeEventListeners();
      };

      const removeEventListeners = () => {
        script.removeEventListener("load", handleScriptLoad);
        script.removeEventListener("error", handleScriptError);
      };

      script.addEventListener("load", handleScriptLoad);
      script.addEventListener("error", handleScriptError);

      const removeOnUnmount = optionsRef.current.removeOnUnmount;

      return () => {
        if (removeOnUnmount === true) {
          script.remove();
          removeEventListeners();
        }
      };
    } else {
      setStatus("unknown");
    }
  }, [src]);

  return status;
}

const setSessionStorageItem = (key, value) => {
  const stringifiedValue = JSON.stringify(value);
  window.sessionStorage.setItem(key, stringifiedValue);
  dispatchStorageEvent(key, stringifiedValue);
};

const removeSessionStorageItem = (key) => {
  window.sessionStorage.removeItem(key);
  dispatchStorageEvent(key, null);
};

const getSessionStorageItem = (key) => {
  return window.sessionStorage.getItem(key);
};

const useSessionStorageSubscribe = (callback) => {
  window.addEventListener("storage", callback);
  return () => window.removeEventListener("storage", callback);
};

const getSessionStorageServerSnapshot = () => {
  throw Error("useSessionStorage is a client-only hook");
};

export function useSessionStorage(key, initialValue) {
  const getSnapshot = () => getSessionStorageItem(key);

  const store = React.useSyncExternalStore(
    useSessionStorageSubscribe,
    getSnapshot,
    getSessionStorageServerSnapshot
  );

  const setState = React.useCallback(
    (v) => {
      try {
        const nextState = typeof v === "function" ? v(JSON.parse(store)) : v;

        if (nextState === undefined || nextState === null) {
          removeSessionStorageItem(key);
        } else {
          setSessionStorageItem(key, nextState);
        }
      } catch (e) {
        console.warn(e);
      }
    },
    [key, store]
  );

  React.useEffect(() => {
    if (
      getSessionStorageItem(key) === null &&
      typeof initialValue !== "undefined"
    ) {
      setSessionStorageItem(key, initialValue);
    }
  }, [key, initialValue]);

  return [store ? JSON.parse(store) : initialValue, setState];
}

export function useSet(values) {
  const setRef = React.useRef(new Set(values));
  const [, reRender] = React.useReducer((x) => x + 1, 0);

  setRef.current.add = (...args) => {
    const res = Set.prototype.add.apply(setRef.current, args);
    reRender();

    return res;
  };

  setRef.current.clear = (...args) => {
    Set.prototype.clear.apply(setRef.current, args);
    reRender();
  };

  setRef.current.delete = (...args) => {
    const res = Set.prototype.delete.apply(setRef.current, args);
    reRender();

    return res;
  };

  return setRef.current;
}

export function useThrottle(value, interval = 500) {
  const [throttledValue, setThrottledValue] = React.useState(value);
  const lastUpdated = React.useRef(null);

  React.useEffect(() => {
    const now = Date.now();

    if (lastUpdated.current && now >= lastUpdated.current + interval) {
      lastUpdated.current = now;
      setThrottledValue(value);
    } else {
      const id = window.setTimeout(() => {
        lastUpdated.current = now;
        setThrottledValue(value);
      }, interval);

      return () => window.clearTimeout(id);
    }
  }, [value, interval]);

  return throttledValue;
}

export function useToggle(initialValue) {
  const [on, setOn] = React.useState(() => {
    if (typeof initialValue === "boolean") {
      return initialValue;
    }

    return Boolean(initialValue);
  });

  const handleToggle = React.useCallback((value) => {
    if (typeof value === "boolean") {
      return setOn(value);
    }

    return setOn((v) => !v);
  }, []);

  return [on, handleToggle];
}

const useVisibilityChangeSubscribe = (callback) => {
  document.addEventListener("visibilitychange", callback);

  return () => {
    document.removeEventListener("visibilitychange", callback);
  };
};

const getVisibilityChangeSnapshot = () => {
  return document.visibilityState;
};

const getVisibilityChangeServerSnapshot = () => {
  throw Error("useVisibilityChange is a client-only hook");
};

export function useVisibilityChange() {
  const visibilityState = React.useSyncExternalStore(
    useVisibilityChangeSubscribe,
    getVisibilityChangeSnapshot,
    getVisibilityChangeServerSnapshot
  );

  return visibilityState === "visible";
}

export function useWindowScroll() {
  const [state, setState] = React.useState({
    x: null,
    y: null,
  });

  const scrollTo = React.useCallback((...args) => {
    if (typeof args[0] === "object") {
      window.scrollTo(args[0]);
    } else if (typeof args[0] === "number" && typeof args[1] === "number") {
      window.scrollTo(args[0], args[1]);
    } else {
      throw new Error(
        `Invalid arguments passed to scrollTo. See here for more info. https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo`
      );
    }
  }, []);

  React.useLayoutEffect(() => {
    const handleScroll = () => {
      setState({ x: window.scrollX, y: window.scrollY });
    };

    handleScroll();
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return [state, scrollTo];
}

export function useWindowSize() {
  const [size, setSize] = React.useState({
    width: null,
    height: null,
  });

  React.useLayoutEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    handleResize();
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return size;
}


================================================
FILE: package.json
================================================
{
  "name": "@uidotdev/usehooks",
  "version": "2.4.1",
  "description": "A collection of modern, server-safe React hooks – from the ui.dev team",
  "type": "module",
  "repository": "uidotdev/usehooks",
  "devDependencies": {
    "@types/react": "^18.2.20",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.1.6"
  },
  "exports": {
    "default": "./index.js"
  },
  "engines": {
    "node": ">=16"
  },
  "files": [
    "index.js",
    "index.d.ts"
  ],
  "types": "index.d.ts",
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0"
  },
  "author": "Tyler McGinnis, Ben Adam",
  "license": "MIT"
}


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "noImplicitAny": true,
    "allowJs": true,
    "outDir": "./irrelevant/unused"
  }
}


================================================
FILE: usehooks.com/.astro/types.d.ts
================================================
declare module 'astro:content' {
	interface Render {
		'.mdx': Promise<{
			Content: import('astro').MarkdownInstance<{}>['Content'];
			headings: import('astro').MarkdownHeading[];
			remarkPluginFrontmatter: Record<string, any>;
		}>;
	}
}

declare module 'astro:content' {
	interface Render {
		'.md': Promise<{
			Content: import('astro').MarkdownInstance<{}>['Content'];
			headings: import('astro').MarkdownHeading[];
			remarkPluginFrontmatter: Record<string, any>;
		}>;
	}
}

declare module 'astro:content' {
	export { z } from 'astro/zod';
	export type CollectionEntry<C extends keyof AnyEntryMap> = AnyEntryMap[C][keyof AnyEntryMap[C]];

	// TODO: Remove this when having this fallback is no longer relevant. 2.3? 3.0? - erika, 2023-04-04
	/**
	 * @deprecated
	 * `astro:content` no longer provide `image()`.
	 *
	 * Please use it through `schema`, like such:
	 * ```ts
	 * import { defineCollection, z } from "astro:content";
	 *
	 * defineCollection({
	 *   schema: ({ image }) =>
	 *     z.object({
	 *       image: image(),
	 *     }),
	 * });
	 * ```
	 */
	export const image: never;

	// This needs to be in sync with ImageMetadata
	export type ImageFunction = () => import('astro/zod').ZodObject<{
		src: import('astro/zod').ZodString;
		width: import('astro/zod').ZodNumber;
		height: import('astro/zod').ZodNumber;
		format: import('astro/zod').ZodUnion<
			[
				import('astro/zod').ZodLiteral<'png'>,
				import('astro/zod').ZodLiteral<'jpg'>,
				import('astro/zod').ZodLiteral<'jpeg'>,
				import('astro/zod').ZodLiteral<'tiff'>,
				import('astro/zod').ZodLiteral<'webp'>,
				import('astro/zod').ZodLiteral<'gif'>,
				import('astro/zod').ZodLiteral<'svg'>
			]
		>;
	}>;

	type BaseSchemaWithoutEffects =
		| import('astro/zod').AnyZodObject
		| import('astro/zod').ZodUnion<import('astro/zod').AnyZodObject[]>
		| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
		| import('astro/zod').ZodIntersection<
				import('astro/zod').AnyZodObject,
				import('astro/zod').AnyZodObject
		  >;

	type BaseSchema =
		| BaseSchemaWithoutEffects
		| import('astro/zod').ZodEffects<BaseSchemaWithoutEffects>;

	export type SchemaContext = { image: ImageFunction };

	type DataCollectionConfig<S extends BaseSchema> = {
		type: 'data';
		schema?: S | ((context: SchemaContext) => S);
	};

	type ContentCollectionConfig<S extends BaseSchema> = {
		type?: 'content';
		schema?: S | ((context: SchemaContext) => S);
	};

	type CollectionConfig<S> = ContentCollectionConfig<S> | DataCollectionConfig<S>;

	export function defineCollection<S extends BaseSchema>(
		input: CollectionConfig<S>
	): CollectionConfig<S>;

	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
		ContentEntryMap[C]
	>['slug'];

	export function getEntryBySlug<
		C extends keyof ContentEntryMap,
		E extends ValidContentEntrySlug<C> | (string & {})
	>(
		collection: C,
		// Note that this has to accept a regular string too, for SSR
		entrySlug: E
	): E extends ValidContentEntrySlug<C>
		? Promise<CollectionEntry<C>>
		: Promise<CollectionEntry<C> | undefined>;

	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
		collection: C,
		entryId: E
	): Promise<CollectionEntry<C>>;

	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
		collection: C,
		filter?: (entry: CollectionEntry<C>) => entry is E
	): Promise<E[]>;
	export function getCollection<C extends keyof AnyEntryMap>(
		collection: C,
		filter?: (entry: CollectionEntry<C>) => unknown
	): Promise<CollectionEntry<C>[]>;

	export function getEntry<
		C extends keyof ContentEntryMap,
		E extends ValidContentEntrySlug<C> | (string & {})
	>(entry: {
		collection: C;
		slug: E;
	}): E extends ValidContentEntrySlug<C>
		? Promise<CollectionEntry<C>>
		: Promise<CollectionEntry<C> | undefined>;
	export function getEntry<
		C extends keyof DataEntryMap,
		E extends keyof DataEntryMap[C] | (string & {})
	>(entry: {
		collection: C;
		id: E;
	}): E extends keyof DataEntryMap[C]
		? Promise<DataEntryMap[C][E]>
		: Promise<CollectionEntry<C> | undefined>;
	export function getEntry<
		C extends keyof ContentEntryMap,
		E extends ValidContentEntrySlug<C> | (string & {})
	>(
		collection: C,
		slug: E
	): E extends ValidContentEntrySlug<C>
		? Promise<CollectionEntry<C>>
		: Promise<CollectionEntry<C> | undefined>;
	export function getEntry<
		C extends keyof DataEntryMap,
		E extends keyof DataEntryMap[C] | (string & {})
	>(
		collection: C,
		id: E
	): E extends keyof DataEntryMap[C]
		? Promise<DataEntryMap[C][E]>
		: Promise<CollectionEntry<C> | undefined>;

	/** Resolve an array of entry references from the same collection */
	export function getEntries<C extends keyof ContentEntryMap>(
		entries: {
			collection: C;
			slug: ValidContentEntrySlug<C>;
		}[]
	): Promise<CollectionEntry<C>[]>;
	export function getEntries<C extends keyof DataEntryMap>(
		entries: {
			collection: C;
			id: keyof DataEntryMap[C];
		}[]
	): Promise<CollectionEntry<C>[]>;

	export function reference<C extends keyof AnyEntryMap>(
		collection: C
	): import('astro/zod').ZodEffects<
		import('astro/zod').ZodString,
		C extends keyof ContentEntryMap
			? {
					collection: C;
					slug: ValidContentEntrySlug<C>;
			  }
			: {
					collection: C;
					id: keyof DataEntryMap[C];
			  }
	>;
	// Allow generic `string` to avoid excessive type errors in the config
	// if `dev` is not running to update as you edit.
	// Invalid collection names will be caught at build time.
	export function reference<C extends string>(
		collection: C
	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;

	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
	>;

	type ContentEntryMap = {
		"hooks": {
"useBattery.mdx": {
	id: "useBattery.mdx";
  slug: "usebattery";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useClickAway.mdx": {
	id: "useClickAway.mdx";
  slug: "useclickaway";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useContinuousRetry.mdx": {
	id: "useContinuousRetry.mdx";
  slug: "usecontinuousretry";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useCopyToClipboard.mdx": {
	id: "useCopyToClipboard.mdx";
  slug: "usecopytoclipboard";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useCountdown.mdx": {
	id: "useCountdown.mdx";
  slug: "usecountdown";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useCounter.mdx": {
	id: "useCounter.mdx";
  slug: "usecounter";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useDebounce.mdx": {
	id: "useDebounce.mdx";
  slug: "usedebounce";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useDefault.mdx": {
	id: "useDefault.mdx";
  slug: "usedefault";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useDocumentTitle.mdx": {
	id: "useDocumentTitle.mdx";
  slug: "usedocumenttitle";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useEventListener.mdx": {
	id: "useEventListener.mdx";
  slug: "useeventlistener";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useFavicon.mdx": {
	id: "useFavicon.mdx";
  slug: "usefavicon";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useFetch.mdx": {
	id: "useFetch.mdx";
  slug: "usefetch";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useGeolocation.mdx": {
	id: "useGeolocation.mdx";
  slug: "usegeolocation";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useHistoryState.mdx": {
	id: "useHistoryState.mdx";
  slug: "usehistorystate";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useHover.mdx": {
	id: "useHover.mdx";
  slug: "usehover";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useIdle.mdx": {
	id: "useIdle.mdx";
  slug: "useidle";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useIntersectionObserver.mdx": {
	id: "useIntersectionObserver.mdx";
  slug: "useintersectionobserver";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useInterval.mdx": {
	id: "useInterval.mdx";
  slug: "useinterval";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useIntervalWhen.mdx": {
	id: "useIntervalWhen.mdx";
  slug: "useintervalwhen";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useIsClient.mdx": {
	id: "useIsClient.mdx";
  slug: "useisclient";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useIsFirstRender.mdx": {
	id: "useIsFirstRender.mdx";
  slug: "useisfirstrender";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useKeyPress.mdx": {
	id: "useKeyPress.mdx";
  slug: "usekeypress";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useList.mdx": {
	id: "useList.mdx";
  slug: "uselist";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useLocalStorage.mdx": {
	id: "useLocalStorage.mdx";
  slug: "uselocalstorage";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useLockBodyScroll.mdx": {
	id: "useLockBodyScroll.mdx";
  slug: "uselockbodyscroll";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useLogger.mdx": {
	id: "useLogger.mdx";
  slug: "uselogger";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useLongPress.mdx": {
	id: "useLongPress.mdx";
  slug: "uselongpress";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useMap.mdx": {
	id: "useMap.mdx";
  slug: "usemap";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useMeasure.mdx": {
	id: "useMeasure.mdx";
  slug: "usemeasure";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useMediaQuery.mdx": {
	id: "useMediaQuery.mdx";
  slug: "usemediaquery";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useMouse.mdx": {
	id: "useMouse.mdx";
  slug: "usemouse";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useNetworkState.mdx": {
	id: "useNetworkState.mdx";
  slug: "usenetworkstate";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useObjectState.mdx": {
	id: "useObjectState.mdx";
  slug: "useobjectstate";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useOrientation.mdx": {
	id: "useOrientation.mdx";
  slug: "useorientation";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"usePageLeave.mdx": {
	id: "usePageLeave.mdx";
  slug: "usepageleave";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"usePreferredLanguage.mdx": {
	id: "usePreferredLanguage.mdx";
  slug: "usepreferredlanguage";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"usePrevious.mdx": {
	id: "usePrevious.mdx";
  slug: "useprevious";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useQueue.mdx": {
	id: "useQueue.mdx";
  slug: "usequeue";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useRandomInterval.mdx": {
	id: "useRandomInterval.mdx";
  slug: "userandominterval";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useRenderCount.mdx": {
	id: "useRenderCount.mdx";
  slug: "userendercount";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useRenderInfo.mdx": {
	id: "useRenderInfo.mdx";
  slug: "userenderinfo";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useScript.mdx": {
	id: "useScript.mdx";
  slug: "usescript";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useSessionStorage.mdx": {
	id: "useSessionStorage.mdx";
  slug: "usesessionstorage";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useSet.mdx": {
	id: "useSet.mdx";
  slug: "useset";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useThrottle.mdx": {
	id: "useThrottle.mdx";
  slug: "usethrottle";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useTimeout.mdx": {
	id: "useTimeout.mdx";
  slug: "usetimeout";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useToggle.mdx": {
	id: "useToggle.mdx";
  slug: "usetoggle";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useVisibilityChange.mdx": {
	id: "useVisibilityChange.mdx";
  slug: "usevisibilitychange";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useWindowScroll.mdx": {
	id: "useWindowScroll.mdx";
  slug: "usewindowscroll";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
"useWindowSize.mdx": {
	id: "useWindowSize.mdx";
  slug: "usewindowsize";
  body: string;
  collection: "hooks";
  data: InferEntrySchema<"hooks">
} & { render(): Render[".mdx"] };
};

	};

	type DataEntryMap = {
		
	};

	type AnyEntryMap = ContentEntryMap & DataEntryMap;

	type ContentConfig = typeof import("../src/content/config");
}


================================================
FILE: usehooks.com/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: usehooks.com/.gitignore
================================================
node_modules
/node_modules
.DS_Store
.env
.env.*
.next
dist/*
/dist
public/meta/*
!public/meta/og.jpg

================================================
FILE: usehooks.com/.prettierrc
================================================
{}

================================================
FILE: usehooks.com/README.md
================================================
# usehooks.com

## 🚀 Project Structure

Inside this project, you'll see the following folders and files:

```
/
├── public/
│   └── favicon.png
│   └── img
├── src/
│   ├── components/
│   │   └── Button.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── sections/
│   │   └── HomeHero.astro
└── package.json
```

Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the `public/` directory.

## 🧞 Commands

All commands are run from the root of the project, from a terminal:

| Command                | Action                                           |
| :--------------------- | :----------------------------------------------- |
| `npm install`          | Installs dependencies                            |
| `npm run dev`          | Starts local dev server at `localhost:3000`      |
| `npm run build`        | Build your production site to `./dist/`          |
| `npm run preview`      | Preview your build locally, before deploying     |
| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
| `npm run astro --help` | Get help using the Astro CLI                     |

Check out [Astro documentation](https://docs.astro.build).

================================================
FILE: usehooks.com/astro.config.mjs
================================================
import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import customTheme from "./theme.json";
import tailwind from "@astrojs/tailwind";

// import vercel from "@astrojs/vercel/edge";

import mdx from "@astrojs/mdx";

// https://astro.build/config
import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
  site: "https://usehooks.com",
  trailingSlash: "never",
  integrations: [react(), tailwind(), mdx(), sitemap()],
  output: "static",
  // adapter: vercel(),
  markdown: {
    shikiConfig: {
      // Choose from Shiki's built-in themes (or add your own)
      // https://github.com/shikijs/shiki/blob/main/docs/themes.md
      theme: customTheme,
      // Add custom languages
      // Note: Shiki has countless langs built-in, including .astro!
      // https://github.com/shikijs/shiki/blob/main/docs/languages.md
      langs: [],
      // Enable word wrap to prevent horizontal scrolling
      wrap: false
    }
  }
});

================================================
FILE: usehooks.com/generate-og-images.mjs
================================================
import { readdir, readFile, writeFile } from "fs/promises";
import { join, extname } from "path";
import matter from "gray-matter";
import { Resvg } from "@resvg/resvg-js";
import { html } from "satori-html";
import satori from "satori";

const dir = "./src/content/hooks";
try {
  const files = await readdir(dir);
  const logo = await readFile(
    new URL("./public/img/logo-useHooks.svg", import.meta.url),
    {
      encoding: "base64",
      width: 300,
      height: 44,
    }
  );

  for (const file of files) {
    if (extname(file) !== ".mdx") {
      continue;
    }

    const content = await readFile(join(dir, file), "utf8");
    const result = matter(content);

    await generateOgImage({
      title: result.data.name,
      slug: result.data.name.toLowerCase(),
      description: result.data.tagline,
      logo
    });
  }
} catch (err) {
  console.error("Error:", err);
}

async function generateOgImage({ title, slug, description, logo }) {
  const svg = await satori(
    html` <style>
        div {
          display: flex;
        }

        .wrapper {
          display: flex;
          flex-direction: column;
          background-color: #0f0d0e;
          height: 630px;
          padding: 80px;
        }

        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .bottom {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          flex-basis: 100%;
          width: 90%;
          padding-bottom: 40px;
        }

        .logo {
          width: 300px;
          height: 44px;
        }

        .install {
          font-size: 32px;
          font-family: "Fira Code";
          color: #f9f4da;
        }

        .install span {
          color: #0ba95b;
          padding-right: 16px;
        }

        .title {
          margin-top: 16px;
          font-size: 64px;
          font-family: "Outfit Bold";
          font-weight: 700;
          color: #12b5e5;
        }

        .description {
          margin-top: 16px;
          color: #f9f4da;
          font-family: "Outfit";
          font-size: 40px;
          font-weight: 400;
        }
      </style>
      <div class="wrapper">
        <div class="top">
          <img class="logo" src="data:image/svg+xml;base64,${logo}" />
          <div class="install"><span>></span> npm i @uidotdev/usehooks</div>
        </div>
        <div class="bottom">
          <div class="title">${title}</div>
          <div class"description">${description}</div>
        </div>
      </div>`,
    {
      fonts: [
        {
          name: "Outfit",
          data: await readFile(
            new URL("./public/fonts/outfit-regular.ttf", import.meta.url)
          ),
          weight: "400",
          style: "normal",
        },
        {
          name: "Outfit Bold",
          data: await readFile(
            new URL("./public/fonts/outfit-bold.ttf", import.meta.url)
          ),
          weight: "700",
          style: "normal",
        },
        {
          name: "Fira Code",
          data: await readFile(
            new URL("./public/fonts/firacode-regular.ttf", import.meta.url)
          ),
          weight: "400",
          style: "normal",
        },
      ],
      width: 1200,
      height: 630,
    }
  );

  const resvg = new Resvg(svg, {
    fitTo: {
      mode: "original",
    },
  });
  const pngData = resvg.render();
  const pngBuffer = pngData.asPng();
  await writeFile(
    new URL(`./public/meta/${slug}.png`, import.meta.url),
    pngBuffer
  );
  console.log("✅", slug);
}


================================================
FILE: usehooks.com/package.json
================================================
{
  "name": "reacthooks.com",
  "type": "module",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "node ./generate-og-images.mjs && astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/mdx": "^0.19.3",
    "@astrojs/react": "^2.2.0",
    "@astrojs/sitemap": "^1.3.1",
    "@astrojs/tailwind": "^3.1.3",
    "@astrojs/ts-plugin": "^1.0.6",
    "@codesandbox/sandpack-react": "^2.6.6",
    "@types/react": "^18.2.7",
    "@types/react-dom": "^18.2.4",
    "astro": "^2.5.2",
    "classnames": "^2.3.2",
    "framer-motion": "^10.9.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.2.7"
  },
  "devDependencies": {
    "@resvg/resvg-js": "^2.4.1",
    "satori": "^0.9.1",
    "satori-html": "^0.3.2"
  }
}


================================================
FILE: usehooks.com/src/components/Button.astro
================================================
---
export interface Props {
	text: string;
	size: string;
	href?: string;
	type: "link" | "button" | "submit" | "reset";
	color: string;
	class?: string;
}

const { type, href, text, size, color } = Astro.props;
const { class: className } = Astro.props;
---

{ type === "link" ? <a class={`button ${size} ${color} ${className}`} href={href}>{text}</a> : <button type={type} class={`button ${size} ${color} ${className}`}>{text}</button> }

<style>
	.button {
		padding: 1em 2em;
		background-color: var(--yellow);
		border-radius: 9999px;
		border: var(--border-dark);
	 	font-family: var(--font-outfit);
		font-size: clamp(.8rem, 1.5vw, 1rem);
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--charcoal);
		cursor: pointer;
		box-shadow: 1px 1px 0 var(--charcoal);
		transition: box-shadow 150ms ease-in-out;
	}

	.button.large {
		padding: 1em 2em;
	}

	.button.small {
		padding: .5em 1em;
	}

	.button.yellow {
		background-color: var(--yellow);
	}

	.button.green {
		background-color: var(--green);
	}

	.button.pink {
		background-color: var(--pink);
	}

	.button::selection {
		background-color: var(--purple);
	}

	.button:not(:disabled):focus-visible,
	.button:not(:disabled):hover {
		outline: none;
		box-shadow: var(--focus-object);
	}

	.button:disabled {
		opacity: .5;
		cursor: not-allowed;
	}
	
</style>


================================================
FILE: usehooks.com/src/components/CodePreview.astro
================================================
---
import CodePreview from "./codepreview/CodePreview";
import { getFiles } from "./codepreview/utils";

const { sandboxId, previewHeight } = Astro.props;
const files = await getFiles({ id: sandboxId });
---

<div>
  <h2>Demo:</h2>
  <div style={{ height: previewHeight }}>
    <CodePreview client:only files={files} previewHeight={previewHeight} />
  </div>
</div>


================================================
FILE: usehooks.com/src/components/CountdownTimer.tsx
================================================
import { Fragment, useEffect, useState } from "react";

interface CountdownProps {
  targetDate: string; // YYYY-MM-DD format
}

interface TimeLeft {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
}

function calculateTimeLeft(targetDate: string): TimeLeft {
  const target = new Date(`${targetDate}T00:00:00-08:00`);
  const now = new Date();
  const difference = +target - +now;

  if (difference <= 0) {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
    };
  }

  return {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };
}

const formatNumber = (number: number) => number.toString().padStart(2, "0");

const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
  const [timeLeft, setTimeLeft] = useState<TimeLeft>(
    calculateTimeLeft(targetDate)
  );

  useEffect(() => {
    const timer = setInterval(() => {
      const newTimeLeft = calculateTimeLeft(targetDate);
      setTimeLeft(newTimeLeft);
      if (
        newTimeLeft.days === 0 &&
        newTimeLeft.hours === 0 &&
        newTimeLeft.minutes === 0 &&
        newTimeLeft.seconds === 0
      ) {
        clearInterval(timer);
      }
    }, 1000);

    return () => clearInterval(timer);
  }, [targetDate]);

  if (
    timeLeft.days === 0 &&
    timeLeft.hours === 0 &&
    timeLeft.minutes === 0 &&
    timeLeft.seconds === 0
  ) {
    return null;
  }

  return (
    <div className="countdown flex gap-1 justify-center text-md">
      {["days", "hours", "minutes", "seconds"].map((unit, index) => (
        <Fragment key={unit}>
          {index > 0 && <span className="countdown-colon pt-1 grid justify-center">:</span>}
          <div className={`${unit} grid grid-cols-2 gap-x-1 gap-y-1.5`}>
            <span className="countdown-number h-[2.2em] aspect-[6/7] grid place-content-center rounded-sm bg-brand-beige font-semibold">
              {formatNumber(timeLeft[unit as keyof TimeLeft]).charAt(0)}
            </span>
            <span className="countdown-number h-[2.2em] aspect-[6/7] grid place-content-center rounded-sm bg-brand-beige font-semibold">
              {formatNumber(timeLeft[unit as keyof TimeLeft]).charAt(1)}
            </span>
            <p className="countdown-label col-span-full text-sm">{unit}</p>
          </div>
        </Fragment>
      ))}
    </div>
  );
};

export default Countdown;


================================================
FILE: usehooks.com/src/components/HookDescription.astro
================================================
---
import Button from "./Button.astro";
const { name } = Astro.props;
---

<div class="description">
  <div>
    <h2>Description:</h2>
    <slot />
  </div>
  <aside class="callout">
    <img
      src="/img/react-gg-logo.svg"
      width="464"
      height="85"
      class="logo"
      alt="React.gg"
    />
    <p>
      Want to learn how to build {name} yourself? Check out <a
        href="https://react.gg?s=usehooks">react.gg</a
      > – the interactive way to master modern React.
    </p>
    <Button
      text="Learn More"
      size="small"
      href="https://react.gg?s=usehooks"
      type="link"
      color="green"
      class="get-started"
    />
  </aside>
</div>

<style>
  .description {
    --callout-width: 300px;
    display: grid;
    gap: 1.5rem 2rem;
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  }

  @media screen and (min-width: 811px) {
    .description {
      grid-template-columns: 1fr var(--callout-width);
    }
  }

  .callout {
    margin: 1rem 0 1.5rem;
    align-self: start;
    padding: 1.5rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border: var(--border-dark);
    border-color: var(--coal);
    border-radius: 0.5rem;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--white);
    text-decoration: none;
    text-align: center;
    transition: all 200ms ease-in-out;
  }

  .callout img.logo {
    max-width: 150px;
  }

  .callout .button {
    transform: translateY(50%);
  }

  .callout p {
    max-width: 40ch;
  }

  @media screen and (min-width: 811px) {
    .callout {
      max-width: var(--callout-width);
      margin-bottom: 0;
    }
  }
</style>


================================================
FILE: usehooks.com/src/components/Install.astro
================================================
---
const { text } = Astro.props;
const { class: className } = Astro.props;
---

<div class={`install ${className}`}>
  <code class={className}>{text}</code>
  <button class={`copy-btn ${className}`}>Copy</button>
</div>

<script>
  const copyButton = document.querySelector(`.copy-btn`);
  const copyText = document.querySelector(`.install code`).textContent;

  copyButton.addEventListener("click", async () => {
    try {
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(copyText);
        copyButton.textContent = "Copied!";
        setTimeout(() => {
          copyButton.textContent = "Copy";
        }, 3000);
      } else {
        throw new Error("writeText not supported");
      }
    } catch (e) {
      oldSchoolCopy(copyText);
    }
  });

  function oldSchoolCopy(text) {
    const tempTextArea = document.createElement("textarea");
    tempTextArea.value = text;
    document.body.appendChild(tempTextArea);
    tempTextArea.select();
    document.execCommand("copy");
    document.body.removeChild(tempTextArea);
  }
</script>

<style>
  .install {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.7rem, 3vw, 2rem);
    background-color: var(--charcoal);
    padding: clamp(1rem, 4vw, 1.3rem) clamp(1rem, 4vw, 1.5rem);
    border-radius: 0.5rem;
  }

  .install code {
    margin-top: 0.3rem;
    padding: 0;
    font-size: clamp(0.8rem, 3vw, 1.2rem) !important;
  }

  .install code::before {
    content: ">";
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--green);
  }

  .copy-btn {
    padding: 0.2rem 0.4rem;
    padding-left: 1.7rem;
    background: no-repeat url("/img/icon-copy.svg") 0.4rem 50% / 0.9rem auto;
    border: var(--border-light);
    border-radius: 0.3rem;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    font-weight: 500;
    transition: all 200ms ease-in-out;
  }

  .copy-btn:hover,
  .copy-btn:focus-visible {
    background-color: var(--coal);
    color: var(--white);
  }
</style>


================================================
FILE: usehooks.com/src/components/Logo.astro
================================================
---
const { class: className } = Astro.props;
---

<a href="https://ui.dev" class={`logo ui-logo image ${className}`}>
	<img src="/img/ui-logo.svg" width="62" height="62" alt="ui.dev" />
</a>

<style>
	.ui-logo {
		display: inline-flex;
		border-radius: 50%;
	}

	.ui-logo:hover {
		transform: scale(1.1);
	}

	.ui-logo img {
		width: clamp(3rem, 10vw, 4rem);
		display: block;
		height: auto;
	}
</style>

================================================
FILE: usehooks.com/src/components/LogoGithub.astro
================================================
---
const { class: className } = Astro.props;
---

<a href="https://github.com/uidotdev/usehooks" class={`logo image github ${className}`}>
	<img src="/img/icon-github.svg" alt="GitHub" width="48" height="48" />
</a>

<style>
	.github {
		display: inline-flex;
		border-radius: 50%;
	}

	.github:focus-visible {
		background-color: transparent;
	}

	.github:hover {
		transform: scale(1.1);
	}

	.github img {
		width: clamp(1.8rem, 7vw, 2.8rem);
		display: block;
		height: auto;
	}
</style>

================================================
FILE: usehooks.com/src/components/QueryGGBanner.astro
================================================
---
import Button from "./Button.astro";
import CountdownTimer from "./CountdownTimer";
---

<aside class="reactgg-container container">
  <div class="reactgg-banner">
    <a href="https://react.gg?s=usehooks" class="reactgg-header">
      <img
        src={"/img/banner-sale-reactgg.svg"}
        alt="react.gg - The interactive way to master modern React"
        class="reactgg-headline"
      />
    </a>
    <div class="reactgg-spacer"></div>
    <div class="reactgg-cta">
      <div class="reactgg-cta-container">
        <h2>react.gg Launch Sale</h2>
        <p>Get 30% off through May 23rd</p>
        <CountdownTimer client:only targetDate="2025-05-24" />
        <Button
          text="Join Now"
          size="small"
          href="https://react.gg?s=usehooks"
          type="link"
          color="yellow"
          class="join-now mt-4 mb-1 lg:mb-2 inline-block"
        />
      </div>
    </div>
  </div>
</aside>

<style>
  .reactgg-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto 30px;
  }

  .reactgg-banner {
    width: 100%;
    background-color: var(--brand-charcoal);
    border: 2px solid var(--brand-charcoal);
    border-radius: 8px;
    box-shadow: 0.2rem 0.2rem 0 var(--brand-charcoal);
    overflow: hidden;
    @media (min-width: 1024px) {
      display: grid;
      grid-template-columns: 1fr 40px 1fr;
    }
  }

  .reactgg-header {
    display: grid;
    align-self: center;
    place-items: center;
    align-content: center;
    height: 190px;
    overflow: hidden;
    @media (min-width: 1024px) {
      height: 280px;
      grid-column: 1 / 3;
      grid-row: 1;
    }
  }

  .reactgg-headline {
    width: 110%;
    max-width: none;
  }

  .reactgg-spacer {
    width: 40px;
    margin-left: 20px;
    display: none;
    background-color: var(--brand-green);
    z-index: 0;
    transform: skew(-7deg);
    @media (min-width: 1024px) {
      display: block;
      grid-column: 2;
      grid-row: 1;
      height: 100%;
    }
  }

  .reactgg-cta {
    padding: 0.5rem;
    display: grid;
    justify-content: center;
    background-color: var(--brand-green);
    color: var(--brand-charcoal);
    z-index: 10;
    @media (min-width: 1024px) {
      padding-bottom: 0;
      grid-row: 1;
      grid-column: 3;
    }
  }

  .reactgg-cta-container {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    place-self: center;
    text-align: center;
    text-transform: uppercase;

    h2 {
      margin-top: 0;
      margin-bottom: 0.5rem;
      font-size: 1.25rem;
      line-height: 1.75rem;
      font-weight: 600;
      color: var(--brand-coal);
      @media (min-width: 1024px) {
        font-size: 1.5rem;
        line-height: 2rem;
      }
      @media (min-width: 1280px) {
        font-size: 1.875rem;
        line-height: 2.25rem;
      }
    }

    h2 + p {
      margin-top: 0;
      margin-bottom: 1.2rem;
      text-transform: none;
      font-size: 90%;
    }
  }

  :global(.countdown-colon),
  :global(.countdown-number) {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }
</style>


================================================
FILE: usehooks.com/src/components/RelatedHook.astro
================================================
---
import { getEntry } from "astro:content";
import HookCard from "./search/HookCard";

const { slug } = Astro.props;
const relatedHook = await getEntry("hooks", slug);
const { name, tagline } = relatedHook.data;
---

<HookCard name={name} tagline={tagline} />

================================================
FILE: usehooks.com/src/components/StaticCodeContainer.astro
================================================
---
import CodeWrapper from './codepreview/CodeWrapper'
---
<div>
  <h2>Example:</h2>
  <div class="min-h-[500px]">
    <CodeWrapper client:only>
      <slot />
    </CodeWrapper>
  </div>
</div>

<noscript>
  <slot />
</noscript>

================================================
FILE: usehooks.com/src/components/Svg.astro
================================================
---
export interface Props {
  name: string;
}

const { name } = Astro.props as Props;
const { default: innerHTML } = await import(`../svg/${name}.svg?raw`);
---

<Fragment set:html={innerHTML} />

================================================
FILE: usehooks.com/src/components/codepreview/CodePreview.tsx
================================================
import {
  SandpackProvider,
  SandpackPreview,
  SandpackStack,
  SandpackFiles,
} from "@codesandbox/sandpack-react";
import cx from "classnames";

export type PreviewProps = {
  previewHeight?: string;
  files?: SandpackFiles | undefined;
};

export default function CodePreview({
  previewHeight = "250px",
  files,
}: PreviewProps) {
  const sandpackProviderProps = {
    files,
    initMode: "user-visible",
    autorun: false,
    logLevel: 0,
  };

  return (
    <div className="editor-wrapper code-preview border-solid border border-brand-coal rounded-[.5rem] overflow-hidden not-prose">
      <SandpackProvider
        template="react"
        theme={{
          colors: {
            surface1: "var(--coal)",
            surface2: "var(--coal)",
          },
        }}
        {...sandpackProviderProps}
      >
        <SandpackStack className="relative">
          <SandpackPreview
            showOpenInCodeSandbox={false}
            showRefreshButton={false}
            style={{ height: previewHeight }}
            className={cx("visible h-full")}
          />
        </SandpackStack>
      </SandpackProvider>
    </div>
  );
}


================================================
FILE: usehooks.com/src/components/codepreview/CodeWrapper.tsx
================================================
import { useState } from "react";
import { motion } from "framer-motion";
import { set } from "astro/zod";

const springConfig = {
  damping: 20,
  stiffness: 120,
  mass: 0.15,
};

export default function CodeWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  const [expanded, setExpanded] = useState(false);
  const [hideExpand, setHideExpand] = useState(false);

  return (
    <div className="relative bg-brand-coal rounded-[.5rem]">
      <motion.div
        variants={{
          expanded: {
            height: "auto",
          },
          collapsed: {
            height: "500px",
          },
        }}
        transition={springConfig}
        initial="collapsed"
        animate={expanded ? "expanded" : "collapsed"}
        className="relative overflow-auto "
      >
        <div
          ref={(el) => {
            if (el) {
              const { height } = el.getBoundingClientRect();
              if (height < 500) {
                setExpanded(true);
                setHideExpand(true);
              }
            }
          }}
        >
          {children}
        </div>
      </motion.div>
      {!hideExpand && (
        <div
          className={`${
            expanded ? "relative" : "absolute"
          } bottom-0 w-full p-4`}
        >
          <button
            className="font-bold uppercase rounded-full px-4 py-1 flex text-xs items-center justify-center bg-brand-charcoal text-brand-beige gap-2 hover:shadow-sm hover:bg-brand-green hover:text-brand-charcoal border border-brand-charcoal transition-all"
            onClick={() => setExpanded(!expanded)}
          >
            {expanded ? "Collapse" : "Expand"}
          </button>
        </div>
      )}
    </div>
  );
}


================================================
FILE: usehooks.com/src/components/codepreview/utils.ts
================================================
import { SandpackFile } from "@codesandbox/sandpack-react";

export async function getFiles({ id }: { id: string }) {
  const configUrl = `https://codesandbox.io/api/v1/sandboxes/${id}/sandpack`;
  const response = await fetch(configUrl);
  if (response.ok) {
    const data = await response.json();
    // This hardcodes the active file, we should find a better way to do this
    return updateFiles(data.files);
  }
  return {};
}

// https://codesandbox.io/s/challenge-ui-test-zurc8s

function getChallengeConfig(json: string) {
  const csb = JSON.parse(json);

  if (csb?.previewConfig) {
    return csb.previewConfig;
  }

  return {
    visibleFiles: [],
    activeFile: "/src/App.js",
  };
}

export function updateFiles(files: { [key: string]: SandpackFile }) {
  const previewConfig = getChallengeConfig(files["/package.json"].code);
  Object.keys(files).map((key) => {
    if (key === previewConfig.activeFile) {
      files[key].active = true;
    }
    if (!previewConfig.visibleFiles.includes(key)) {
      files[key].hidden = true;
    }
  });
  return files;
}


================================================
FILE: usehooks.com/src/components/search/Callout.module.css
================================================
.callout :global(a) {
  height: 100%;
  padding: var(--body-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border: var(--border-dark);
  border-radius: 0.5rem;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  text-align: center;
  transition: all 200ms ease-in-out;
}

.callout :global(a:hover) {
  transform: scale(1.03);
}

.callout :global(img:not(.logo)) {
  max-width: 120px;
  margin-top: calc(var(--body-padding) * -1.2);
  margin-bottom: 0.5rem;
}

.callout :global(img.d20) {
  width: 70px;
}

.callout :global(img.money) {
  width: 110px;
}

.callout :global(img.spinner) {
  width: 80px;
}

.callout :global(img.hot-sauce) {
  width: 80px;
}

.callout :global(img.logo) {
  max-width: 150px;
}


================================================
FILE: usehooks.com/src/components/search/Callout.tsx
================================================
import styles from "./Callout.module.css";

type Props = {
  image: string;
  imageWidth: string;
  imageHeight: string;
  imageAlt: string;
  pitch: string;
};

export default function Callout({
  image,
  imageWidth,
  imageHeight,
  imageAlt,
  pitch,
}) {
  return (
    <li className={styles.callout}>
      <a href="https://react.gg?s=usehooks" className="logo image">
        <img
          src={`/img/${image}.svg`}
          width={imageWidth}
          height={imageHeight}
          className={image}
          alt={imageAlt}
        />
        <img
          src="/img/react-gg-logo.svg"
          width="464"
          height="85"
          className="logo"
          alt="React.gg"
        />
        <p>{pitch}</p>
      </a>
    </li>
  );
}


================================================
FILE: usehooks.com/src/components/search/HookCard.module.css
================================================
.hook > :global(a) {
  height: 100%;
  padding: var(--body-padding);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background-color: var(--charcoal);
  border-radius: 0.5rem;
  transition: transform 200ms ease-in-out;
}

.hook > :global(a:hover) {
  transform: scale(1.03);
}

.card-title {
  color: var(--blue);
  text-transform: none;
  font-family: var(--font-outfit);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 600;
}

.card-description {
  margin-bottom: 0.5rem;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
}

.arrow {
  width: 28px;
  aspect-ratio: 3 / 2;
  margin-top: auto;
  align-self: flex-end;
  transition: all 200ms ease-in-out;
}

:global(a:hover) .arrow {
  transform: translateX(0.6rem);
}


================================================
FILE: usehooks.com/src/components/search/HookCard.tsx
================================================
import styles from './HookCard.module.css';

export default function HookCard({
  name,
  tagline,
}: {
  name: string;
  tagline: string;
}) {
  return (
    <li className={styles.hook}>
      <a href={`/${name.toLowerCase()}`}>
        <h3 className={styles["card-title"]}>{name}</h3>
        <p className={styles["card-description"]}>{tagline}</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className={styles.arrow}
          viewBox="0 0 36 24"
        >
          <path
            fill="none"
            stroke="#12b2e2"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M1.86 12h30.18M21.31 1.15 34.14 12 21.31 22.85"
          />
        </svg>
      </a>
    </li>
  );
}


================================================
FILE: usehooks.com/src/components/search/HookSearch.module.css
================================================
.hooks-search {
  position: relative;
  align-self: flex-start;
}

.input {
  padding: 0.4rem 1rem;
  padding-right: 2rem;
  background-color: var(--coal);
  border: var(--border-light);
  border-radius: 1.5rem;
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--white);
  transition: all 150ms ease-in-out;
}

.input:focus {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: var(--focus-object);
}

.input + :global(button) {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  transition: all 150ms ease-in-out;
}

:global(input[type="search"]::-webkit-search-decoration),
:global(input[type="search"]::-webkit-search-cancel-button),
:global(input[type="search"]::-webkit-search-results-button),
:global(input[type="search"]::-webkit-search-results-decoration) {
  display: none;
}


================================================
FILE: usehooks.com/src/components/search/HookSearch.tsx
================================================
import styles from "./HookSearch.module.css";

export default function HookSearch({
  handleChange,
  handleClear,
  value,
}: {
  handleClear: () => void;
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  value: string;
}) {
  return (
    <div className={styles["hooks-search"]}>
      <input
        onChange={handleChange}
        className={styles.input}
        value={value}
        type="search"
        id="search"
        placeholder="Search"
      />
      <button id="search-cancel" aria-label="Clear" onClick={handleClear}>
        ✕
      </button>
    </div>
  );
}


================================================
FILE: usehooks.com/src/components/search/HookSort.module.css
================================================
.toggle {
  padding: 0.2rem 0.4rem;
  border: var(--border-light);
  border-radius: 0.3rem;
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  font-weight: 500;
  transition: all 200ms ease-in-out;
}

.toggle.active {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: var(--charcoal);
  cursor: default;
}

.toggle:not(.active):hover {
  background-color: var(--charcoal);
}


================================================
FILE: usehooks.com/src/components/search/HookSort.tsx
================================================
import styles from "./HookSort.module.css";

export default function HookSort({
  setSort,
  value,
}: {
  setSort: (value: "name" | "popular") => void;
  value: "name" | "popular";
}) {
  return (
    <div className="hooks-sort flex items-center gap-2">
      <small>Sort:</small>
      <button
        onClick={() => setSort("popular")}
        className={`${styles.toggle} ${
          value === "popular" ? styles.active : ""
        }`}
      >
        Popular
      </button>
      <button
        onClick={() => setSort("name")}
        className={`${styles.toggle} ${value === "name" ? styles.active : ""}`}
      >
        Name
      </button>
    </div>
  );
}


================================================
FILE: usehooks.com/src/components/search/HooksList.module.css
================================================
.hooks-grid {
  max-width: 980px;
  margin: 2rem auto;
}

.hooks-controls {
  padding: 1rem var(--body-padding);
  display: flex;
  justify-content: flex-end;
}

.hooks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
  gap: 1.6rem;
}


================================================
FILE: usehooks.com/src/components/search/HooksList.tsx
================================================
import { useState } from "react";
import Callout from "./Callout";
import HookCard from "./HookCard";
import HookSort from "./HookSort";
import styles from "./HooksList.module.css";

function insertAtIntervals(arr, items) {
  let newArr = [...arr]; // create a copy of the array
  let step = Math.ceil(newArr.length / items.length);

  // Insert the first item at the beginning of the array
  newArr.unshift(items[0]);

  for (let i = 1; i < items.length; i++) {
    let position = i * step + 1; // +1 to account for the first item
    newArr.splice(position, 0, items[i]);
  }

  return newArr;
}

function sortAlphabetical(a, b) {
  if (a.data.name < b.data.name) {
    return -1;
  }
  if (a.data.name > b.data.name) {
    return 1;
  }
  return 0;
}

function sortByPopularity(a, b) {
  if (a.data.rank < b.data.rank) {
    return -1;
  }
  if (a.data.rank > b.data.rank) {
    return 1;
  }
  return 0;
}

const sortMap = {
  name: sortAlphabetical,
  popular: sortByPopularity,
};

export default function HooksList({ hooks }) {
  const [sort, setSort] = useState<"name" | "popular">("popular");

  const list = hooks.sort(sortMap[sort]);
  const listWithCallouts = insertAtIntervals(list, [
    {
      id: "Callout 1",
      image: "d20",
      imageWidth: "222",
      imageHeight: "206",
      imageAlt: "20-sided die",
      pitch:
        "It’s dangerous to go alone! Master React by learning how to build useHooks yourself.",
    },
    {
      id: "Callout 2",
      image: "spinner",
      imageWidth: "284",
      imageHeight: "180",
      imageAlt: "board game spinner and all options are React",
      pitch:
        "There’s no better way to learn useHooks than by building it yourself.",
    },
    {
      id: "Callout 3",
      image: "money",
      imageWidth: "210",
      imageHeight: "210",
      imageAlt: "$100 Monopoly-style money",
      pitch:
        "Please give us your money.",
    },
    {
      id: "Callout 4",
      image: "hot-sauce",
      imageWidth: "206",
      imageHeight: "224",
      imageAlt: "travel-style postcard from React that says “Enjoy the views!",
      pitch:
        "The all new interactive way to master modern React (for fun and profit).",
    }
  ]);

  return (
    <section className={styles["hooks-grid"]}>
      <div className={styles["hooks-controls"]}>
        <HookSort setSort={setSort} value={sort} />
      </div>
      <ul className={styles["hooks-list"]}>
        {listWithCallouts.map(
          ({ data, id, image, imageWidth, imageHeight, imageAlt, pitch }) => {
            if (!data) {
              return (
                <Callout
                  key={id}
                  image={image}
                  imageWidth={imageWidth}
                  imageHeight={imageHeight}
                  imageAlt={imageAlt}
                  pitch={pitch}
                />
              );
            }
            return (
              <HookCard key={id} name={data.name} tagline={data.tagline} />
            );
          }
        )}
      </ul>
    </section>
  );
}


================================================
FILE: usehooks.com/src/content/config.ts
================================================
import { defineCollection, z, reference } from 'astro:content';

export const collections = {
  hooks: defineCollection({
    schema: z.object({
      experimental: z.boolean().optional(),
      draft: z.boolean().default(false),
      sandboxId: z.string().optional(),
      previewHeight: z.string().optional(),
      name: z.string(),
      tagline: z.string(),
      ogImage: z.string().optional(),
      rank: z.number(),
      relatedHooks: z.array(
        reference('hooks').optional()
      ).optional(),
    }),
  }),
};

================================================
FILE: usehooks.com/src/content/hooks/useBattery.mdx
================================================
---
name: useBattery
rank: 32
tagline: Track the battery status of a user’s device with useBattery.
sandboxId: usebattery-o8js1p
previewHeight: 320px
relatedHooks:
  - usenetworkstate
  - usepreferredlanguage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useBattery hook is useful for accessing and monitoring the battery status
  of the user’s device in a React application. By using this hook, you can
  easily retrieve information such as the battery level, charging status, and
  estimated charging and discharging times. It provides a state object that
  includes properties like supported, loading, level, charging, chargingTime,
  and dischargingTime.
</HookDescription>

<div class="reference">
  ### Return Values
  The hook returns an object containing the following properties:

  <div class="table-container">
  | Name             | Type    | Description |
  | ---------------- | ------- | ----------- |
  | supported        | boolean | Indicates whether the Battery Status API is supported in the user’s browser. |
  | loading          | boolean | Indicates if the battery information is still loading. |
  | level            | number  | Represents the level of the system’s battery. 0.0 means that the system’s battery is completely discharged, and 1.0 means the battery is completely charged. |
  | charging         | boolean | Represents whether the system’s battery is charging. `true` means the battery is charging, `false` means it’s not. |
  | chargingTime     | number  | Represents the time remaining in seconds until the system’s battery is fully charged. |
  | dischargingTime  | number  | Represents the time remaining in seconds until the system’s battery is completely discharged and the system is about to be suspended. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import { useBattery } from "@uidotdev/usehooks";
import Battery from "./Battery";

export default function App() {
  const { loading, level, charging, chargingTime, dischargingTime } =
    useBattery();
  return (
    <>
      <div className="wrapper">
        <h1>useBattery</h1>
        {!loading ? (
          <Battery
            level={level * 100}
            charging={charging}
            chargingTime={chargingTime}
            dischargingTime={dischargingTime}
          />
        ) : (
          <h2>Loading...</h2>
        )}
      </div>
    </>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useClickAway.mdx
================================================
---
name: useClickAway
rank: 47
tagline: Detect clicks outside of specific component with useClickAway.
sandboxId: useclickaway-p4hl4m
previewHeight: 250px
relatedHooks:
  - uselongpress
  - usehover
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useClickAway hook is a useful for detecting clicks outside a specific
  component. It allows you to pass a callback function that will be triggered
  whenever a click occurs outside the component’s area. This hook is
  particularly helpful when implementing dropdown menus, modals, or any other UI
  elements that need to be closed when the user clicks outside of them. By
  attaching event listeners to the document, the hook checks if the click target
  is within the component’s reference, and if not, it invokes the provided
  callback function.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name | Type     | Description |
  | ---- | -------- | ----------- |
  | callback | function | The callback function that is provided as an argument to `useClickAway`. This function is invoked whenever a click event is detected outside of the referenced element. The event object from the click is passed to this callback function. |
  </div>

  ### Return Values

  <div class="table-container">
  | Name | Type         | Description |
  | ---- | ------------ | ----------- |
  | ref  | React ref    | This is a ref object returned by the hook. It should be attached to a React element to monitor click events. The ref provides a way to access the properties of the element it is attached to. |
  </div>
</div>


<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useClickAway } from "@uidotdev/usehooks";
import { closeIcon } from "./icons";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const ref = useClickAway(() => {
    setIsOpen(false);
  });

  const handleOpenModal = () => {
    if (isOpen === false) {
      setIsOpen(true);
    }
  };

  return (
    <>
      <section>
        <h1>useClickAway</h1>
        <button className="link" onClick={handleOpenModal}>
          Open Modal
        </button>
      </section>
      {isOpen && (
        <dialog ref={ref}>
          <button onClick={() => setIsOpen(false)}>{closeIcon}</button>
          <h2>Modal</h2>
          <p>
            Click outside the modal to close (or use the button) whatever you
            prefer.
          </p>
        </dialog>
      )}
    </>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useContinuousRetry.mdx
================================================
---
name: useContinuousRetry
experimental: true
rank: 12
tagline: Automates retries of a callback function until it succeeds with useContinuousRetry
sandboxId: usecontinuousretry-v0uf1n
previewHeight: 380px
relatedHooks:
  - usesessionstorage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useContinuousRetry hook allows you to repeatedly call a specified callback
  function at a defined interval until the callback returns a truthy value,
  indicating a successful resolution. This hook is particularly handy when
  dealing with asynchronous operations or API calls that may fail temporarily
  and need to be retried automatically. It encapsulates the logic of retrying
  and provides a clean interface to handle retry-related states, such as whether
  the retry process has resolved or not.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name     | Type     | Description                                                                                                                                                  |
  | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------|
  | callback | function | The callback function to be executed repeatedly until it returns a truthy value.                                                                             |
  | interval | number   | (Optional) The interval in milliseconds at which the callback function is executed. Default value is 100 milliseconds.                                       |
  | options  | object   | (Optional) An object containing a `maxRetries` property which tells `useContinuousRetry` the maximum amount of retry attempts it should make before stopping |
  </div>

  ### Return Value

  <div class="table-container">
  | Type    | Description                                                                                |
  | ------- | ------------------------------------------------------------------------------------------ |
  | boolean | `true` if the callback function has resolved (returned a truthy value), `false` otherwise. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useContinuousRetry } from "@uidotdev/usehooks";

export default function App() {
  const [count, setCount] = React.useState(0);
  const hasResolved = useContinuousRetry(() => {
    console.log("retrying");
    return count > 10;
  }, 1000);

  return (
    <section>
      <h1>useContinuousRetry</h1>
      <button className="primary" onClick={() => setCount(count + 1)}>
        {count}
      </button>
      <pre>{JSON.stringify({ hasResolved, count }, null, 2)}</pre>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useCopyToClipboard.mdx
================================================
---
name: useCopyToClipboard
rank: 31
tagline: Copy text to the clipboard using useCopyToClipboard.
sandboxId: usecopytoclipboard-y22r6w
previewHeight: 300px
relatedHooks:
  - usemap
  - usequeue
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useCopyToClipboard hook is useful because it abstracts the complexity of
  copying text to the clipboard in a cross-browser compatible manner. It
  utilizes the modern navigator.clipboard.writeText method if available, which
  provides a more efficient and secure way to copy text. In case the writeText
  method is not supported by the browser, it falls back to a traditional method
  using the document.execCommand("copy") approach.
</HookDescription>

<div class="reference">
  ### Return Value

  The `useCopyToClipboard` hook returns an array with the following elements:

  <div class="table-container">
  | Index | Type     | Description                                            |
  | ----- | -------- | ------------------------------------------------------ |
  | 0     | string   | The value that was last copied to the clipboard.       |
  | 1     | function | A function to copy a specified value to the clipboard. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useCopyToClipboard } from "@uidotdev/usehooks";
import { copyIcon, checkIcon } from "./icons";

const randomHash = crypto.randomUUID();

export default function App() {
  const [copiedText, copyToClipboard] = useCopyToClipboard();
  const hasCopiedText = Boolean(copiedText);
  return (
    <section>
      <h1>useCopyToClipboard</h1>
      <article>
        <label>Fake API Key</label>
        <pre>
          <code>{randomHash}</code>
          <button
            disabled={hasCopiedText}
            className="link"
            onClick={() => copyToClipboard(randomHash)}
          >
            {hasCopiedText ? checkIcon : copyIcon}
          </button>
        </pre>
      </article>
      {hasCopiedText && (
        <dialog open={hasCopiedText}>
          <h4>
            Copied{" "}
            <span role="img" aria-label="Celebrate Emoji">
              🎉
            </span>
          </h4>
          <textarea placeholder="Paste your copied text" />
        </dialog>
      )}
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useCountdown.mdx
================================================
---
name: useCountdown
experimental: true
rank: 21
tagline: Create countdown timers using useCountdown.
sandboxId: usecountdown-6gzbhg
previewHeight: 340px
relatedHooks:
  - useinterval
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useCountdown hook is useful for creating a countdown timer. By specifying
  an endTime and various options such as the interval between ticks and callback
  functions for each tick and completion, the hook sets up an interval that
  updates the count and triggers the appropriate callbacks until the countdown
  reaches zero. The countdown value is returned, allowing you to easily
  incorporate and display the countdown in your components.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name    | Type   | Description                                                                                                                                                                                                                                                                                                         |
  | ------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | endTime | number | The end time of the countdown in milliseconds since the Unix epoch.                                                                                                                                                                                                                                                 |
  | options | object | An object containing the following options:<ul><li>`interval`: The interval in milliseconds at which the countdown should tick.</li><li>`onComplete`: A callback function to be called when the countdown reaches zero.</li><li>`onTick`: A callback function to be called on each tick of the countdown.</li></ul> |
  </div>

  ### Return Value

  <div class="table-container">
  | Name  | Type   | Description                         |
  | ----- | ------ | ----------------------------------- |
  | count | number | The current count of the countdown. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useCountdown } from "@uidotdev/usehooks";

export default function App() {
  const [endTime, setEndTime] = React.useState(new Date(Date.now() + 10000));
  const [complete, setComplete] = React.useState(false);

  const count = useCountdown(endTime, {
    interval: 1000,
    onTick: () => console.log("tick"),
    onComplete: (time) => setComplete(true),
  });

  const handleClick = (time) => {
    if (complete === true) return;
    const nextTime = endTime.getTime() + time;
    setEndTime(new Date(nextTime));
  };

  return (
    <section>
      <header>
        <h1>useCountdown</h1>
      </header>
      <span className="countdown">{count}</span>
      {complete === false && (
        <div className="button-row">
          <button onClick={() => handleClick(5000)}>+5s</button>
          <button onClick={() => handleClick(10000)}>+10s</button>
          <button onClick={() => handleClick(15000)}>+15s</button>
        </div>
      )}
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useCounter.mdx
================================================
---
name: useCounter
rank: 49
tagline: Manage a counter value with minimum and maximum limits with useCounter.
sandboxId: usecounter-ddeo74
previewHeight: 450px
relatedHooks:
  - usecountdown
  - useprevious
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useCounter hook is useful for managing a counter value with additional
  options for minimum and maximum limits. The hook takes a starting value and
  options object as parameters, which can specify minimum and maximum limits for
  the counter. If the starting value falls outside the specified limits, an
  error is thrown. The hook returns the current count value and an object
  containing functions to increment, decrement, set a specific count, and reset
  the counter.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name          | Type   | Description                                        |
  | ------------- | ------ | -------------------------------------------------- |
  | startingValue | number | The initial value for the counter. Default is `0`. |
  | options       | object | Additional options for the counter.                |
  | options.min   | number | The minimum value allowed for the counter.         |
  | options.max   | number | The maximum value allowed for the counter.         |
  </div>

  ### Return Value

  The `useCounter` hook returns an array with two elements:

  <div class="table-container">
  | Name            | Parameters        | Description                                          |
  | --------------- | ----------------- | ---------------------------------------------------- |
  | `[0]`           |                   | The current value of the counter.                    |
  | `[1].increment` |                   | Increments the counter by 1.                         |
  | `[1].decrement` |                   | Decrements the counter by 1.                         |
  | `[1].set`       | nextCount: number | Sets the counter to the specified `nextCount` value. |
  | `[1].reset`     |                   | Resets the counter to the initial `startingValue`.   |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useCounter } from "@uidotdev/usehooks";

export default function App() {
  const [count, { increment, decrement, set, reset }] = useCounter(5, {
    min: 5,
    max: 10,
  });

  return (
    <section>
      <h1>UseCounter</h1>
      <h6>with optional min / max</h6>
      <button disabled={count >= 10} className="link" onClick={increment}>
        Increment
      </button>
      <button disabled={count <= 5} className="link" onClick={decrement}>
        Decrement
      </button>
      <button className="link" onClick={() => set(6)}>
        Set to 6
      </button>
      <button className="link" onClick={reset}>
        Reset
      </button>
      <p>{count}</p>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useDebounce.mdx
================================================
---
name: useDebounce
rank: 1
tagline: Delay the execution of function or state update with useDebounce.
sandboxId: usedebounce-hmo7m3
previewHeight: 1000px
relatedHooks:
  - usethrottle
  - usefetch
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useDebounce hook is useful for delaying the execution of functions or
  state updates until a specified time period has passed without any further
  changes to the input value. This is especially useful in scenarios such as
  handling user input or triggering network requests, where it effectively
  reduces unnecessary computations and ensures that resource-intensive
  operations are only performed after a pause in the input activity.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name  | Type   | Description |
  | ----- | ------ | ----------- |
  | value | any    | The value that you want to debounce. This can be of any type. |
  | delay | number | The delay time in milliseconds. After this amount of time, the latest value is used. |
  </div>

  ### Return Values

  <div class="table-container">
  | Name          | Type | Description |
  | ------------- | ---- | ----------- |
  | debouncedValue| any  | The debounced value. After the delay time has passed without the `value` changing, this will be updated to the latest `value`. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useDebounce } from "@uidotdev/usehooks";
import searchHackerNews from "./searchHackerNews";
import SearchResults from "./SearchResults";

export default function App() {
  const [searchTerm, setSearchTerm] = React.useState("js");
  const [results, setResults] = React.useState([]);
  const [isSearching, setIsSearching] = React.useState(false);
  const debouncedSearchTerm = useDebounce(searchTerm, 300);

  const handleChange = (e) => {
    setSearchTerm(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    setSearchTerm(formData.get("search"));
    e.target.reset();
    e.target.focus();
  };

  React.useEffect(() => {
    const searchHN = async () => {
      let results = [];
      setIsSearching(true);
      if (debouncedSearchTerm) {
        const data = await searchHackerNews(debouncedSearchTerm);
        results = data?.hits || [];
      }

      setIsSearching(false);
      setResults(results);
    };

    searchHN();
  }, [debouncedSearchTerm]);

  return (
    <section>
      <header>
        <h1>useDebounce</h1>
        <form onSubmit={handleSubmit}>
          <input
            name="search"
            placeholder="Search HN"
            style={{ background: "var(--charcoal)" }}
            onChange={handleChange}
          />
          <button className="primary" disabled={isSearching} type="submit">
            {isSearching ? "..." : "Search"}
          </button>
        </form>
      </header>
      <SearchResults results={results} />
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useDefault.mdx
================================================
---
name: useDefault
rank: 44
tagline: Manage state with default values using useDefault.
sandboxId: usedefault-5c0pyt
previewHeight: 250px
relatedHooks:
  - useprevious
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The `useDefault` hook behaves similar to `useState` but with one difference – if the state of the hook is `undefined` or `null`, `useDefault` will default the state to a provided default value.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name         | Type     | Description |
  | ------------ | -------- | ----------- |
  | initialValue | any      | The initial value of the state returned from `useDefault` |
  | defaultValue | any      | The default value to be used if the state is `undefined` or `null`. |
  </div>

  ### Return Values

  <div class="table-container">
  | Name     | Type            | Description |
  | -------- | --------------- | ----------- |
  | state    | any             | The current state. If the state is `undefined` or `null`, `defaultValue` is returned instead. |
  | setState | function        | The state setter function returned from `React.useState()`. This can be called to update the state. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useDefault } from "@uidotdev/usehooks";

export default function App() {
  const initialState = { name: "Tyler" };
  const defaultState = { name: "Ben" };

  const [user, setUser] = useDefault(initialState, defaultState);

  return (
    <section>
      <h1>useDefault</h1>

      <button
        title="Sets the value to Lynn"
        className="link"
        onClick={() => setUser({ name: "Lynn" })}
      >
        Lynn
      </button>
      <button
        title="Sets the value to Tyler"
        className="link"
        onClick={() => setUser({ name: "Tyler" })}
      >
        Tyler
      </button>
      <button
        title="Sets the value to null causing it to use the default value"
        className="link"
        onClick={() => setUser(null)}
      >
        Null
      </button>
      <pre>
        <code>{JSON.stringify(user)}</code>
      </pre>
    </section>
  );
}

```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useDocumentTitle.mdx
================================================
---
name: useDocumentTitle
rank: 40
tagline: Dynamically update the title of a webpage with useDocumentTitle.
sandboxId: usedocumenttitle-6vmc1n
previewHeight: 300px
relatedHooks:
  - usefavicon
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useDocumentTitle hook is useful for dynamically updating the title of a
  webpage based on the current state or data. This hook proves beneficial in
  scenarios where the title needs to be dynamically updated, such as displaying
  the name of the currently selected item or reflecting changes in application
  state.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name  | Type   | Description                           |
  | ----- | ------ | ------------------------------------- |
  | title | string | The title to be set for the document. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useDocumentTitle } from "@uidotdev/usehooks";

export default function App() {
  const [count, setCount] = React.useState(0);

  useDocumentTitle(`Clicked ${count} times.`);
  return (
    <section>
      <h1>useDocumentTitle</h1>
      <h6>
        <a
          className="link"
          href="https://6vmc1n.csb.app/"
          target="_blank"
          rel="noreferrer"
        >
          Try in a new tab
        </a>
      </h6>
      <button className="primary" onClick={() => setCount(count + 1)}>
        Increment Count: {count}
      </button>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useEventListener.mdx
================================================
---
name: useEventListener
experimental: true
rank: 26
tagline: Listen for events on a target element with useEventListener.
sandboxId: useeventlistener-51h645
previewHeight: 250px
relatedHooks:
  - usescript
  - usehover
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useEventListener hook enables you to add event listeners to a target
  element within a React component. By using useEventListener, you can handle
  various types of events, such as mouse events or keyboard events, and specify
  the target element, event name, event handler function, and additional
  options. applications.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name            | Type               | Description                                                                                                         |
  | --------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
  | target          | ref or DOM element | The target element to attach the event listener to. It can be either a ref object (`ref.current`) or a DOM element. |
  | eventName       | string             | The name of the event to listen for.                                                                                |
  | handler         | function           | The event handler function to be executed when the event is triggered.                                              |
  | options         | object             | (Optional) Additional options for the event listener.                                                               |
  | options.capture | boolean            | Specifies whether the event should be captured during the capturing phase. Default is `false`.                      |
  | options.passive | boolean            | Specifies whether the event listener will not call `preventDefault()`. Default is `false`.                          |
  | options.once    | boolean            | Specifies whether the event listener should only be invoked once. Default is `false`.                               |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useEventListener } from "@uidotdev/usehooks";
import { closeIcon } from "./icons";

export default function App() {
  const ref = React.useRef(null);
  const [isOpen, setIsOpen] = React.useState(false);

  const handleClick = (e) => {
    const element = ref.current;
    if (element && !element.contains(e.target)) {
      setIsOpen(false);
    }
  };

  useEventListener(document, "mousedown", handleClick);

  return (
    <section>
      <h1>useEventListener</h1>
      <div style={{ minHeight: "200vh" }}>
        <button className="link" onClick={() => setIsOpen(true)}>
          Click me
        </button>
      </div>
      {isOpen && (
        <dialog ref={ref}>
          <button onClick={() => setIsOpen(false)}>{closeIcon}</button>
          <h2>Modal</h2>
          <p>
            Click outside the modal to close (or use the button) whatever you
            prefer.
          </p>
        </dialog>
      )}
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useFavicon.mdx
================================================
---
name: useFavicon
rank: 43
tagline: Dynamically update the favicon with useFavicon.
sandboxId: usefavicon-xckn4k
previewHeight: 200px
relatedHooks:
  - usedocumenttitle
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useFavicon hook is a useful for dynamically update the favicon (shortcut icon) of a web page. By using this hook, you can easily change the favicon by providing a new URL as a parameter. It creates a new link element with the specified URL, sets its type and relationship attributes appropriately, and appends it to the `<head>` section of the document.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name | Type   | Description                                        |
  | ---- | ------ | -------------------------------------------------- |
  | url  | string | The URL of the favicon to be set for the document. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useFavicon } from "@uidotdev/usehooks";

export default function App() {
  const [favicon, setFavicon] = React.useState(
    "https://ui.dev/favicon/favicon-32x32.png"
  );

  useFavicon(favicon);

  return (
    <section>
      <h1>useFavicon</h1>

      <button
        title="Set the favicon to Bytes' logo"
        className="link"
        onClick={() =>
          setFavicon("https://bytes.dev/favicon/favicon-32x32.png")
        }
      >
        Bytes
      </button>
      <button
        title="Set the favicon to React Newsletter's logo"
        className="link"
        onClick={() =>
          setFavicon("https://reactnewsletter.com/favicon/favicon-32x32.png")
        }
      >
        React Newsletter
      </button>

      <button
        title="Set the favicon to uidotdev's logo"
        className="link"
        onClick={() => setFavicon("https://ui.dev/favicon/favicon-32x32.png")}
      >
        ui.dev
      </button>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useFetch.mdx
================================================
---
name: useFetch
experimental: true
rank: 11
tagline: Fetch data with accurate states, caching, and no stale responses using useFetch.
sandboxId: usefetch-yky89o
previewHeight: 670px
relatedHooks:
  - useintersectionobserver
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useFetch React hook is useful for handling data fetching and state
  management in React components. It allows you to easily fetch data from a
  specified URL using the fetch API and provides a consistent pattern for
  handling loading, success, and error states. It also incorporates an internal
  caching mechanism to store and retrieve previously fetched data, improving
  performance by reducing redundant network requests. Additionally, it includes
  a mechanism to ignore stale responses if the component unmounts or if a new
  request is made before the previous one completes.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name    | Type   | Description                                                                              |
  | ------- | ------ | ---------------------------------------------------------------------------------------- |
  | url     | string | The URL to fetch data from.                                                              |
  | options | object | (Optional) Additional options for the fetch request, such as headers or request methods. |
  </div>

  ### Return Values

  <div class="table-container">
  | Name        | Type               | Description                                                                    |
  | ----------- | ------------------ | ------------------------------------------------------------------------------ |
  | state       | object             | The state object containing the fetched data and error status.                 |
  | state.error | error \| undefined | The error object if an error occurred during the fetch, otherwise `undefined`. |
  | state.data  | any \| undefined   | The fetched data if the fetch was successful, otherwise `undefined`.           |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useFetch } from "@uidotdev/usehooks";
import Card from "./Card";

export default function App() {
  const [count, setCount] = React.useState(1);

  const { error, data } = useFetch(
    `https://pokeapi.co/api/v2/pokemon/${count}`
  );

  return (
    <section>
      <h1>useFetch</h1>
      <button
        disabled={count < 2}
        className="link"
        onClick={() => setCount((c) => c - 1)}
      >
        Prev
      </button>
      <button className="link" onClick={() => setCount((c) => c + 1)}>
        Next
      </button>
      <Card loading={!data} error={error} data={data} />
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useGeolocation.mdx
================================================
---
name: useGeolocation
rank: 36
tagline: Access and monitor a user's geolocation (after they give permission) with useGeolocation.
sandboxId: usegeolocation-3f1d0f
previewHeight: 900px
relatedHooks:
  - usemap
  - useset
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useGeolocation hook is useful for accessing and monitoring the user's
  geolocation (after they give permission) in a React application. By utilizing
  the hook, developers can easily retrieve the user's current position,
  including latitude, longitude, altitude, accuracy, heading, speed, and
  timestamp.
</HookDescription>

<div class="reference">
  ### Parameters

<div class="table-container">
| Name    | Type   | Description |
| ------- | ------ | ----------- |
| options | object | This is an optional configuration object provided when calling `useGeolocation`. It is used when calling `navigator.geolocation.getCurrentPosition()` and `navigator.geolocation.watchPosition()`. Some of the attributes it accepts are `enableHighAccuracy`, `timeout`, and `maximumAge`. |
</div>

### Return Values

The hook returns an object containing the following properties:

  <div class="table-container">
  | Name              | Type    | Description |
  | ----------------- | ------- | ----------- |
  | loading           | boolean | A boolean indicating if the geolocation data is currently being fetched. |
  | accuracy          | number  | The accuracy of the latitude and longitude properties in meters. |
  | altitude          | number  | The altitude in meters above the mean sea level. |
  | altitudeAccuracy  | number  | The accuracy of altitude in meters. |
  | heading           | number  | The direction in which the device is traveling. This value, specified in degrees, indicates how far off from heading true north the device is. |
  | latitude          | number  | The latitude in decimal degrees. |
  | longitude         | number  | The longitude in decimal degrees. |
  | speed             | number  | The current ground speed of the device, specified in meters per second. |
  | timestamp         | number  | The timestamp at which the geolocation data was retrieved. |
  | error             | object  | An error object, if an error occurred while retrieving the geolocation data. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useGeolocation } from "@uidotdev/usehooks";
import Demo from "./Demo";

export default function App() {
  return (
    <section>
      <h1>useGeolocation</h1>
      <Location />
    </section>
  );
}

function Location() {
  const state = useGeolocation();

  if (state.loading) {
    return <p>loading... (you may need to enable permissions)</p>;
  }

  if (state.error) {
    return <p>Enable permissions to access your location data</p>;
  }

  return <Demo state={state} />;
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useHistoryState.mdx
================================================
---
name: useHistoryState
rank: 35
tagline: Add undo / redo functionality with useHistoryState.
sandboxId: usehistorystate-tubwyj
previewHeight: 400px
relatedHooks:
  - usemap
  - useset
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useHistoryState hook is useful for managing state with undo and redo
  capabilities in React components. The hook offers functions like undo, redo,
  set, and clear to interact with the state as well as other state related
  values like canUndo and canRedo.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name           | Type   | Description                                        |
  | -------------- | ------ | -------------------------------------------------- |
  | initialPresent | object | (Optional) The initial state value. Default: `{}`. |
  </div>

  ### Return Value

  The `useHistoryState` hook returns an object with the following properties and functions:

  <div class="table-container">
  | Name    | Type     | Description                                                |
  | ------- | -------- | ---------------------------------------------------------- |
  | state   | any      | The current state value.                                   |
  | set     | function | A function to set the state value.                         |
  | undo    | function | A function to undo the previous state.                     |
  | redo    | function | A function to redo the next state.                         |
  | clear   | function | A function to clear the state history and reset the state. |
  | canUndo | boolean  | Indicates whether an undo action is available.             |
  | canRedo | boolean  | Indicates whether a redo action is available.              |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import Form from "./Form";
import { useHistoryState } from "@uidotdev/usehooks";

export default function App() {
  const { state, set, undo, redo, clear, canUndo, canRedo } = useHistoryState({
    items: [],
  });

  const addTodo = (val) => {
    set({
      ...state,
      items: state.items.concat({ id: crypto.randomUUID(), name: val }),
    });
  };

  const removeTodo = (id) => {
    set({
      ...state,
      items: state.items.filter((item) => item.id !== id),
    });
  };

  return (
    <section>
      <header>
        <h1>useHistoryState</h1>
        <div>
          <button disabled={!canUndo} className="link" onClick={undo}>
            Undo
          </button>
          <button disabled={!canRedo} className="link" onClick={redo}>
            Redo
          </button>

          <button
            disabled={!state.items.length}
            className="link"
            onClick={clear}
          >
            Clear
          </button>
        </div>
        <Form addItem={addTodo} />
      </header>

      <ul>
        {state.items.map((item, index) => {
          return (
            <li key={index}>
              <span>{item.name}</span>
              <button className="link" onClick={() => removeTodo(item.id)}>
                Delete
              </button>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useHover.mdx
================================================
---
name: useHover
rank: 24
tagline: Track whether an element is being hovered over with useHover.
sandboxId: usehover-9lxxmo
previewHeight: 420px
relatedHooks:
  - uselockbodyscroll
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useHover hook allows you to track whether an element is being hovered over
  or not. The hook returns a reference to attach to the target element and the
  current hovering status, enabling you to apply conditional rendering or
  perform any desired actions based on the hover state.
</HookDescription>

<div class="reference">
  ### Return Value

  The `useHover` hook returns an array with the following elements:

  <div class="table-container">
  | Index | Type    | Description                                                                |
  | ----- | ------- | -------------------------------------------------------------------------- |
  | 0     | ref     | A ref object that can be attached to the element intended to be hovered.   |
  | 1     | boolean | A boolean value indicating whether the element is currently being hovered. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useHover } from "@uidotdev/usehooks";

function getRandomColor() {
  const colors = ["green", "blue", "purple", "red", "pink"];
  return colors[Math.floor(Math.random() * colors.length)];
}

export default function App() {
  const [ref, hovering] = useHover();

  const backgroundColor = hovering
    ? `var(--${getRandomColor()})`
    : "var(--charcoal)";

  return (
    <section>
      <h1>useHover</h1>
      <article ref={ref} style={{ backgroundColor }}>
        Hovering? {hovering ? "Yes" : "No"}
      </article>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useIdle.mdx
================================================
---
name: useIdle
rank: 33
tagline: Detect user inactivity with useIdle.
sandboxId: useidle-myg19f
previewHeight: 200px
relatedHooks:
  - usevisibilitychange
  - usebattery
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useIdle hook is a useful tool for detecting user inactivity within a web
  application. It tracks user interaction and determines if a specified duration
  of time has passed without any activity. This hook is particularly handy for
  implementing features like automatic logout, displaying notifications after a
  period of inactivity, or adjusting UI elements based on user engagement.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name | Type   | Description |
  | ---- | ------ | ----------- |
  | ms   | number | This is the duration of idle time (in milliseconds) after which the `idle` state will be set to `true`. The default value is `20 * 1000` (20 seconds). |
  </div>

  ### Return Values

  <div class="table-container">
  | Name | Type    | Description |
  | ---- | ------- | ----------- |
  | idle | boolean | A boolean indicating if the user is idle. It is `true` if the user has been idle for at least `ms` milliseconds. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useIdle } from "@uidotdev/usehooks";

export default function App() {
  const idle = useIdle(5000);
  return (
    <section>
      <h1>useIdle</h1>
      <div>
        <span className={idle ? "idle" : ""} />
        <label>Status: {idle ? "Idle" : "Active"}</label>
      </div>
      {idle ? <p>Time to move your mouse</p> : <p>Hold still and wait</p>}
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useIntersectionObserver.mdx
================================================
---
name: useIntersectionObserver
rank: 5
tagline: Track and manage the visibility of your DOM elements within the viewport with useIntersectionObserver.
sandboxId: useintersectionobserver-uxlxkn
previewHeight: 500px
relatedHooks:
  - usemeasure
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useIntersectionObserver hook is useful because it provides a
  straightforward, built-in method for tracking the visibility and position of a
  DOM element in relation to the viewport. By leveraging the Intersection
  Observer API, it can greatly optimize performance and provide efficient,
  real-time updates for lazy-loading, infinite scrolling, or other
  visibility-dependent elements. With customizable thresholds and root margins,
  developers have fine-grained control over when the hook triggers, improving
  the user experience by dynamically loading content only when necessary.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name       | Type    | Default | Description                                                                                                                                                                                                                                                |
  | ---------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | threshold  | number  | 1       | Either a single number or an array of numbers between 0 and 1, indicating at what percentage of the target’s visibility the observer’s callback should be executed.                                                                                        |
  | root       | element | null    | The Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.                                                                                                              |
  | rootMargin | string  | "0%"    | Margin around the root. Can have values similar to the CSS margin property. The values can be percentages. This set of values serves to grow or shrink each side of the root element’s bounding box before computing intersections. Defaults to all zeros. |
  </div>

  ### Return Value

  <div class="table-container">
  | Name  | Type             | Description                                                                                                     |
  | ----- | ---------------- | --------------------------------------------------------------------------------------------------------------- |
  | ref   | React ref object | A React reference that can be attached to a DOM element to observe.                                             |
  | entry | object           | An object containing information about the intersection. This object is similar to `IntersectionObserverEntry`. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useIntersectionObserver } from "@uidotdev/usehooks";
import demoData from "./demoData";

const Section = ({ imgUrl, caption, href }) => {
  const [ref, entry] = useIntersectionObserver({
    threshold: 0,
    root: null,
    rootMargin: "0px",
  });

  return (
    <section>
      <figure ref={ref}>
        {entry?.isIntersecting && (
          <>
            <img src={imgUrl} alt={caption} />
            <figcaption>
              <a href={href} alt={caption} target="_blank" rel="noreferrer">
                {caption}
              </a>
            </figcaption>
          </>
        )}
      </figure>
    </section>
  );
};

export default function App() {
  return (
    <main>
      <header>
        <h1>useIntersectionObserver</h1>
        <h6>
          (Memes from <a href="https://bytes.dev">bytes.dev</a>)
        </h6>
      </header>

      {demoData.map(({ imgUrl, href, caption }, index) => {
        return (
          <Section key={index} imgUrl={imgUrl} href={href} caption={caption} />
        );
      })}
    </main>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useInterval.mdx
================================================
---
name: useInterval
experimental: true
rank: 19
tagline: Schedule periodic actions like data polling or animations with useInterval.
sandboxId: useinterval-81c43g
previewHeight: 500px
relatedHooks:
  - useintervalwhen
  - usecontinuousretry
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useInterval hook provides a convenient way to create and manage intervals.
  The hook sets up an interval that repeatedly invokes the callback function at
  the specified interval. The interval is automatically cleared when the
  component unmounts or when the interval duration changes. This hook is useful
  for scenarios where you need to perform a certain action or update the
  component periodically, such as polling for data updates or implementing
  animations.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name | Type     | Description                                                     |
  | ---- | -------- | --------------------------------------------------------------- |
  | cb   | function | The callback function to be executed at the specified interval. |
  | ms   | number   | The interval duration in milliseconds.                          |
  </div>

  ### Return Value

  <div class="table-container">
  | Name          | Type     | Description                                              |
  | ------------- | -------- | -------------------------------------------------------- |
  | clearInterval | function | A function to clear the interval and stop the execution. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useInterval } from "@uidotdev/usehooks";

const colors = ["green", "blue", "purple", "red", "pink", "beige", "yellow"];

export default function App() {
  const [running, setIsRunning] = React.useState(true);
  const [index, setIndex] = React.useState(0);

  const clear = useInterval(() => {
    setIndex(index + 1);
  }, 1000);

  const handleStop = () => {
    clear();
    setIsRunning(false);
  };

  const color = colors[index % colors.length];
  return (
    <section>
      <h1>useInterval</h1>
      <button disabled={!running} className="link" onClick={handleStop}>
        {running ? "Stop" : "Stopped"}
      </button>
      <div style={{ backgroundColor: `var(--${color})` }} />
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useIntervalWhen.mdx
================================================
---
name: useIntervalWhen
experimental: true
rank: 18
tagline: Create dynamic timers that can be started, paused, or resumed with useIntervalWhen.
sandboxId: useintervalwhen-cp7e31
previewHeight: 400px
relatedHooks:
  - userandominterval
  - usecontinuousretry
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useIntervalWhen hook is useful for creating an interval timer that can be
  controlled based on certain conditions. It allows you to specify a callback
  function to be executed at a regular interval specified by the ms parameter.
  Additionally, you can choose whether the interval should start immediately or
  wait for a trigger by setting the startImmediately parameter. This hook is
  particularly handy when you need to create dynamic timers that can be started,
  paused, or resumed based on specific conditions.
</HookDescription>
<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name                     | Type     | Description                                                                                         |
  | ------------------------ | -------- | --------------------------------------------------------------------------------------------------- |
  | cb                       | function | The callback function to be executed at the specified interval when the condition is met.           |
  | options                  | object   | An object containing the following options.                                                         |
  | options.ms               | number   | The interval duration in milliseconds.                                                              |
  | options.when             | boolean  | The condition that determines whether the interval should be active (`true`) or paused (`false`).   |
  | options.startImmediately | boolean  | (Optional) Whether to start the interval immediately when the condition is met. Default is `false`. |
  </div>

  ### Return Value

  <div class="table-container">
  | Type     | Description                                               |
  | -------- | --------------------------------------------------------- |
  | function | A function to clear the interval and pause the execution. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useIntervalWhen } from "@uidotdev/usehooks";

export default function App() {
  const [count, setCount] = React.useState(0);
  const [when, setWhen] = React.useState(false);

  useIntervalWhen(
    () => {
      setCount((c) => c + 0.1);
    },
    { ms: 100, when, startImmediately: true }
  );

  return (
    <section>
      <h1>useIntervalWhen</h1>
      <button title="Click to toggle the timer" onClick={() => setWhen(!when)}>
        {count.toLocaleString("en-US", {
          maximumFractionDigits: 2,
          minimumFractionDigits: 2,
        })}
        <span className="btn link">{when ? "stop" : "start"}</span>
      </button>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useIsClient.mdx
================================================
---
name: useIsClient
rank: 22
tagline: Determine whether the code is running on the client-side or server-side with useIsClient.
sandboxId: useisclient-4edyux
previewHeight: 240px
relatedHooks:
  - userenderinfo
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  useIsClient is useful for determining if it's safe to run certain client-only hooks like useMediaQuery or useLocalStorage. It returns a boolean determining if React's useEffect hook has finished running (which means the app is being rendered on the client and it's safe to use browser specific APIs).
</HookDescription>

<div class="reference">
  ### Parameters

  The `useIsClient` hook does not accept any parameters.

  ### Return Value

  <div class="table-container">
  | Name     | Type    | Description                                                        |
  | -------- | ------- | ------------------------------------------------------------------ |
  | isClient | boolean | `true` if running in a client-side environment, `false` otherwise. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useIsClient } from "@uidotdev/usehooks";

export default function App() {
  const isClient = useIsClient();

  return (
    <section>
      <h1>useIsClient</h1>
      <h6>Is Client? </h6>
      <p>{isClient ? "If you can see this ... you already know" : "No"}</p>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useIsFirstRender.mdx
================================================
---
name: useIsFirstRender
rank: 41
tagline: Differentiate between the first and subsequent renders with useIsFirstRender.
sandboxId: useisfirstrender-rny2tm
previewHeight: 300px
relatedHooks:
  - userendercount
  - uselogger
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useIsFirstRender hook is a useful for determining whether the current
  render is the first render of a component. This hook is particularly valuable
  when you want to conditionally execute certain logic or render specific
  components only on the initial render, providing an efficient way to
  differentiate between the first and subsequent renders.
</HookDescription>

<div class="reference">
  ### Return Value

  <div class="table-container">
  | Name          | Type    | Description                                      |
  | ------------- | ------- | ------------------------------------------------ |
  | isFirstRender | boolean | `true` for the first render, `false` for others. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useIsFirstRender } from "@uidotdev/usehooks";

export default function App() {
  const isFirstRender = useIsFirstRender();
  const [count, rerender] = React.useReducer((x) => x + 1, 1);

  return (
    <section>
      <h1>useIsFirstRender</h1>
      <h2>First Render? {isFirstRender ? "Yes" : "No"}</h2>
      <button className="primary" onClick={rerender}>
        re-render
      </button>
      <p>Render Count: {count}</p>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useKeyPress.mdx
================================================
---
name: useKeyPress
experimental: true
rank: 27
tagline: Detect and perform actions on key press events with useKeyPress.
sandboxId: usekeypress-7vgzwf
previewHeight: 350px
relatedHooks:
  - useeventlistener
  - usehover
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useKeyPress hook is a useful for detecting key presses and performing
  specific actions based on the pressed key. By calling useKeyPress with the
  desired key and callback function, the hook sets up an event listener that
  triggers the callback when the specified key is pressed.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name                 | Type                  | Description                                                                                            |
  | -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------ |
  | key                  | string                | The key to listen for.                                                                                 |
  | cb                   | function              | The callback function to be executed when the key is pressed.                                          |
  | options              | object                | (Optional) Additional options for the key press event.                                                 |
  | options.event        | string                | (Optional) The event type to listen for. Default is `"keydown"`.                                       |
  | options.target       | DOM element or window | (Optional) The target element or `window` object to attach the event listener to. Default is `window`. |
  | options.eventOptions | object                | (Optional) Additional options for the event listener.                                                  |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useKeyPress } from "@uidotdev/usehooks";

export default function App() {
  const [activeKey, setActiveKey] = React.useState("");

  useKeyPress("ArrowRight", onKeyPress);
  useKeyPress("ArrowLeft", onKeyPress);
  useKeyPress("ArrowUp", onKeyPress);
  useKeyPress("ArrowDown", onKeyPress);

  function onKeyPress(e) {
    e.preventDefault();
    setActiveKey(e.key);
    setTimeout(() => {
      setActiveKey("");
    }, 600);
  }

  return (
    <section>
      <h1>useKeyPress</h1>
      <p>Press one of the arrow keys on your keyboard</p>
      <article>
        <button className={activeKey === "ArrowUp" ? "pressed" : ""}>
          <span>&uarr;</span>
        </button>
        <button className={activeKey === "ArrowLeft" ? "pressed" : ""}>
          <span>&larr;</span>
        </button>
        <button className={activeKey === "ArrowDown" ? "pressed" : ""}>
          <span>&darr;</span>
        </button>
        <button className={activeKey === "ArrowRight" ? "pressed" : ""}>
          <span>&rarr;</span>
        </button>
      </article>
      {Boolean(activeKey) && <label>{activeKey} was pressed</label>}
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useList.mdx
================================================
---
name: useList
rank: 48
tagline: Manage and manipulate lists with useList.
sandboxId: uselist-5mmpw2
previewHeight: 550px
relatedHooks:
  - usehistorystate
  - useprevious
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useList hook is useful for managing and manipulating lists in a React
  component. It encapsulates the list state and provides a set of convenient
  methods to modify the list. By using this hook, you can easily initialize a
  list with a default value and access various methods to add, remove, update,
  or clear elements within the list.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name        | Type  | Description                                              |
  | ----------- | ----- | -------------------------------------------------------- |
  | defaultList | array | The initial list of elements. Default is an empty array. |
  </div>

  ### Return Value

  The `useList` hook returns an array with two elements:

  <div class="table-container">
  | Name           | Parameters                  | Description                                                       |
  | -------------- | --------------------------- | ----------------------------------------------------------------- |
  | `[0]`          |                             | The current list of elements.                                     |
  | `[1].set`      | l: array                    | Replaces the entire list with a new array `l`.                    |
  | `[1].push`     | element: any                | Appends the `element` to the end of the list.                     |
  | `[1].removeAt` | index: number               | Removes the element at the specified `index` from the list.       |
  | `[1].insertAt` | index: number, element: any | Inserts the `element` at the specified `index` in the list.       |
  | `[1].updateAt` | index: number, element: any | Replaces the element at the specified `index` with the `element`. |
  | `[1].clear`    |                             | Removes all elements from the list.                               |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import { useList } from "@uidotdev/usehooks";
import ListDemo from "./ListDemo";

export default function App() {
  const [list, { set, push, removeAt, insertAt, updateAt, clear }] = useList([
    "First",
    "Second",
    "Third",
  ]);

  return (
    <section>
      <header>
        <h1>UseList</h1>
        <button
          disabled={list.length < 1}
          className="link"
          onClick={() => insertAt(1, "woo")}
        >
          Insert After First
        </button>
        <button
          disabled={list.length < 2}
          className="link"
          onClick={() => removeAt(1)}
        >
          Remove Second Item
        </button>
        <button className="link" onClick={() => set([1, 2, 3])}>
          Reset
        </button>
        <button className="link" onClick={() => clear()}>
          Clear
        </button>
      </header>
      <ListDemo
        list={list}
        updateAt={updateAt}
        push={push}
        removeAt={removeAt}
      />
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useLocalStorage.mdx
================================================
---
name: useLocalStorage
rank: 2
tagline: Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage
sandboxId: uselocalstorage-e6v6ey
previewHeight: 670px
relatedHooks:
  - usesessionstorage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useLocalStorage hook provides a convenient way to synchronize the state of
  a component with the data stored in local storage. It automatically reads the
  initial value from local storage when the component mounts and updates the
  local storage whenever the state changes. Additionally, it listens for changes
  in local storage made by other tabs or windows and keeps the component’s state
  up to date.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name | Type | Description |
  |------|------|-------------|
  | key | string | The key used to access the local storage value. |
  | initialValue | any | The initial value to use if there is no item in the local storage with the provided key. |
  </div>

  ### Return Values

  <div class="table-container">
  | Name | Type | Description |
  |------|------|-------------|
  | localState | any | The current state of the value stored in local storage. |
  | handleSetState | function | A function to set the state of the value in the local storage. This function accepts a new value or a function that returns a new value. The value is also saved in the local storage under the provided key. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useLocalStorage } from "@uidotdev/usehooks";
import createDrawing from "./createDrawing";

export default function App() {
  const [drawing, saveDrawing] = useLocalStorage("drawing", null);
  const ref = React.useRef(null);
  React.useEffect(() => {
    createDrawing(ref.current, drawing, saveDrawing);
  }, [drawing, saveDrawing]);

  return (
    <section>
      <header>
        <h1>useLocalStorage</h1>

        <button className="link" onClick={() => window.location.reload()}>
          Reload Window
        </button>
        <button
          className="link"
          onClick={() => {
            window.localStorage.clear();
            window.location.reload();
          }}
        >
          Clear Local Storage
        </button>
      </header>
      <figure>
        <canvas ref={ref} width={800} height={800} />
        <figcaption>(draw something)</figcaption>
      </figure>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useLockBodyScroll.mdx
================================================
---
name: useLockBodyScroll
rank: 20
tagline: Temporarily disable scrolling on the document body with useLockBodyScroll.
sandboxId: uselockbodyscroll-on17pi
previewHeight: 500px
relatedHooks:
  - usescript
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useLockBodyScroll hook temporarily disables scrolling on the document
  body. This can be beneficial in scenarios where you want to restrict scrolling
  while displaying a modal, a dropdown menu, or any other component that
  requires the user’s focus. Once the component using this hook is unmounted or
  no longer needed, the hook returns a cleanup function that restores the
  original overflow style, ensuring that the scroll behavior is reverted to its
  previous state.
</HookDescription>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useLockBodyScroll } from "@uidotdev/usehooks";
import { closeIcon } from "./icons";
import DemoContent from "./DemoContent";

function Modal({ handleClose }) {
  useLockBodyScroll();

  return (
    <div>
      <dialog>
        <header>
          <button onClick={handleClose}>{closeIcon}</button>
          <h2>Modal</h2>
        </header>
        <section>
          <DemoContent />
        </section>
      </dialog>
    </div>
  );
}

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <>
      {isOpen && <Modal handleClose={() => setIsOpen(false)} />}
      <main>
        <header>
          <h1>useLockBodyScroll</h1>
        </header>
        {["red", "blue", "green", "pink", "purple", "yellow"].map((color) => {
          return (
            <section
              style={{
                backgroundColor: `var(--${color})`,
                width: "100%",
                height: "50vh",
              }}
            />
          );
        })}
        <button className="primary" onClick={() => setIsOpen(true)}>
          openModal
        </button>
      </main>
    </>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useLogger.mdx
================================================
---
name: useLogger
experimental: true
rank: 39
tagline: Debug lifecycle events with useLogger.
sandboxId: uselogger-o2e03i
previewHeight: 500px
relatedHooks:
  - userendercount
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useLogger hook is useful for logging various lifecycle events in a React
  component. This custom hook accepts a name parameter and additional arguments,
  and it logs the lifecycle events (mounted, updated, and unmounted) along with
  the provided name and arguments. This useLogger hook can be employed to
  facilitate debugging, monitoring, or performance optimization by providing
  insights into when and how a component’s lifecycle events occur.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name    | Type   | Description                            |
  | ------- | ------ | -------------------------------------- |
  | name    | string | The name or identifier for the logger. |
  | ...rest | any    | Additional arguments to be logged.     |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useLogger } from "@uidotdev/usehooks";

function FirstChild(props) {
  useLogger(props.name, props);
  return (
    <li className={props.isActive ? "active" : ""}>
      <h5>{props.name}</h5>
      <p>{props.count}</p>
    </li>
  );
}

export default function App() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => setCount(count + 1);

  return (
    <section>
      <h1>useLogger</h1>
      <h6>(Check the console)</h6>
      <button className="primary" onClick={handleClick}>
        Increment Count
      </button>
      <ul>
        {["First", "Second", "Third"].map((item, index) => {
          const isActive = count % 3 === index;
          return (
            <FirstChild
              key={index}
              name={item}
              isActive={isActive}
              count={count}
            />
          );
        })}
      </ul>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useLongPress.mdx
================================================
---
name: useLongPress
rank: 42
tagline: Enable precise control of long-press interactions for both touch and mouse events with useLongPress.
sandboxId: uselongpress-0fpxj6
previewHeight: 240px
relatedHooks:
  - usemeasure
  - usetoggle
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useLongPress hook enhances React applications by managing long-press
  interactions for both mouse and touch events, thereby ensuring a consistent
  user experience across devices. This hook not only broadens user interactivity
  but also allows for customization, providing developers the flexibility to
  adjust the long-press functionality according to their application needs.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name                 | Type     | Description |
  | -------------------- | -------- | ----------- |
  | callback             | function | This is the function to be executed when a long press event is detected. |
  | options              | object   | This is an optional configuration object provided when calling `useLongPress`. |
  | options.threshold    | number   | This is the time (in milliseconds) the user must press and hold to trigger a long press event. Default value is `400`. |
  | options.onStart      | function | This function is called when the user starts pressing. |
  | options.onFinish     | function | This function is called when a long press event finishes successfully (the user releases after the threshold). |
  | options.onCancel     | function | This function is called when a press event is cancelled (the user releases before the threshold). |
  </div>

  ### Return Values

  <div class="table-container">
  | Name         | Type     | Description |
  | ------------ | -------- | ----------- |
  | onMouseDown  | function | This is the mouse down event handler. |
  | onMouseUp    | function | This is the mouse up event handler. |
  | onMouseLeave | function | This is the mouse leave event handler. |
  | onTouchStart | function | This is the touch start event handler. |
  | onTouchEnd   | function | This is the touch end event handler. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useLongPress } from "@uidotdev/usehooks";
import { closeIcon } from "./icons";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const attrs = useLongPress(
    () => {
      setIsOpen(true);
    },
    {
      onStart: (event) => console.log("Press started"),
      onFinish: (event) => console.log("Press Finished"),
      onCancel: (event) => console.log("Press cancelled"),
      threshold: 500,
    }
  );

  return (
    <section>
      <h1>useLongPress</h1>
      <button {...attrs} className="primary">
        Press Me
      </button>
      {isOpen && (
        <dialog>
          <button onClick={() => setIsOpen(false)}>{closeIcon}</button>
          <h2>Modal</h2>
          <p>This is a modal triggered by a long press.</p>
        </dialog>
      )}
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useMap.mdx
================================================
---
name: useMap
rank: 28
tagline: Synchronize and update state based on the Map data structure with useMap.
sandboxId: usemap-ev8nd1
previewHeight: 300px
relatedHooks:
  - usequeue
  - useset
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useMap hook provides a wrapper around the JavaScript Map object and allows
  you to easily update and synchronize the map state with the component’s
  rendering. By using this hook, you can add, delete, or clear entries in the
  map while ensuring that the component re-renders whenever these operations are
  performed.
</HookDescription>

<div class="reference">
  ### Return Value

  <div class="table-container">
  | Name | Type       | Description                                            |
  | ---- | ---------- | ------------------------------------------------------ |
  | map  | map object | An instance of the `Map` object with enhanced methods. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useMap } from "@uidotdev/usehooks";

export default function App() {
  const map = useMap([
    ["Jazz", 32],
    ["Suns", 50],
  ]);

  return (
    <section>
      <h1>useMap</h1>
      <table>
        <thead>
          <tr>
            <th colSpan={4}>Jazz vs Suns</th>
          </tr>
        </thead>
        <tbody>
          {Array.from(map.keys()).map((team) => {
            const score = map.get(team);
            return (
              <tr key={team}>
                <th style={{ width: "25%" }}>{team}</th>
                <td style={{ width: "50%" }}>{score}</td>
                <td style={{ width: "12.5%" }}>
                  <button
                    className="link"
                    onClick={() => {
                      map.set(team, score + 2);
                    }}
                  >
                    + 2
                  </button>
                </td>
                <td style={{ width: "12.5%" }}>
                  <button
                    className="link"
                    onClick={() => {
                      map.set(team, score + 3);
                    }}
                  >
                    + 3
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useMeasure.mdx
================================================
---
name: useMeasure
rank: 46
tagline: Effortlessly measure and track your component’s dimensions with useMeasure.
sandboxId: usemeasure-3kyegb
previewHeight: 300px
relatedHooks:
  - usepreferredlanguage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useMeasure hook provides a convenient and efficient way to monitor and
  respond to changes in the size of a React component. This custom hook uses the
  ResizeObserver API to actively track changes in the component’s dimensions,
  such as width and height, and keeps them available as state. The returned ref
  is used on the element whose dimensions you want to measure, making it a
  valuable tool for responsive design and dynamic layout adjustments.
</HookDescription>

<div class="reference">
  ### Return Value

  <div class="table-container">
  | Name | Type | Description |
  | --- | --- | --- |
  | ref | React ref object | A React reference that can be attached to a DOM element to observe. |
  | rect | object | An object containing the width and height of the observed element. |
  </div>

  ### rect Object Properties

  <div class="table-container">
  | Property | Type | Description |
  | --- | --- | --- |
  | width | number | Width of the observed element. |
  | height | number | Height of the observed element. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useMeasure } from "@uidotdev/usehooks";

function Measure({ type = "horizontal" }) {
  const [ref, { width, height }] = useMeasure();

  return (
    <figure>
      <figcaption>
        <span>{type}</span>
      </figcaption>
      <article
        ref={ref}
        className={type}
        style={{
          resize: type
        }}
      >
        {type === "horizontal" ? (
          <label>width: {Math.floor(width)}</label>
        ) : (
          <label>height: {Math.floor(height)}</label>
        )}
      </article>
    </figure>
  );
}

export default function App() {
  return (
    <section>
      <h1>useMeasure</h1>
      <p>(Resize the rulers)</p>
      <Measure />
    </section>
  );
}

```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useMediaQuery.mdx
================================================
---
name: useMediaQuery
rank: 7
tagline: Subscribe and respond to media query changes with useMediaQuery.
sandboxId: usemediaquery-qu6bcp
previewHeight: 400px
relatedHooks:
  - useintersectionobserver
  - usemeasure
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useMediaQuery hook leverages the window.matchMedia API to subscribe to CSS
  media query changes, thereby providing real-time responsiveness to dynamic
  changes in the viewport or screen orientation. It allows the component to
  rerender whenever the media query’s result changes. It throws an error if
  attempted to be used on the server-side (media queries only work in the
  browser).
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name  | Type   | Description                       |
  | ----- | ------ | --------------------------------- |
  | query | string | The media query to listen changes |
  </div>

  ### Return Value

  <div class="table-container">
  | Type    | Description                                                                                         |
  | ------- | --------------------------------------------------------------------------------------------------- |
  | boolean | Returns a boolean value indicating whether the media query matches the current state of the device. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useMediaQuery } from "@uidotdev/usehooks";
import { phone, tablet, laptop, desktop } from "./icons";

export default function App() {
  const isSmallDevice = useMediaQuery("only screen and (max-width : 768px)");
  const isMediumDevice = useMediaQuery(
    "only screen and (min-width : 769px) and (max-width : 992px)"
  );
  const isLargeDevice = useMediaQuery(
    "only screen and (min-width : 993px) and (max-width : 1200px)"
  );
  const isExtraLargeDevice = useMediaQuery(
    "only screen and (min-width : 1201px)"
  );

  return (
    <section>
      <h1>useMediaQuery</h1>
      Resize your browser windows to see changes.
      <article>
        <figure className={isSmallDevice ? "active" : ""}>
          {phone}
          <figcaption>Small</figcaption>
        </figure>
        <figure className={isMediumDevice ? "active" : ""}>
          {tablet}
          <figcaption>Medium</figcaption>
        </figure>
        <figure className={isLargeDevice ? "active" : ""}>
          {laptop}
          <figcaption>Large</figcaption>
        </figure>
        <figure className={isExtraLargeDevice ? "active" : ""}>
          {desktop}
          <figcaption>Extra Large</figcaption>
        </figure>
      </article>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useMouse.mdx
================================================
---
name: useMouse
rank: 50
tagline: Track and retrieve the position of the mouse cursor with useMouse.
sandboxId: usemouse-8yu3mi
previewHeight: 450px
relatedHooks:
  - usehover
  - useeventlistener
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useMouse hook is useful for tracking and retrieving the position of the
  mouse cursor within a component. By utilizing this hook, developers can easily
  access information such as the current coordinates of the mouse cursor (x and
  y), the position of the mouse cursor relative to an element within the
  component (elementX and elementY), and the position of that element on the
  page (elementPositionX and elementPositionY).
</HookDescription>

<div class="reference">
  ### Parameters

  None.

  ### Return Value

  The `useMouse` hook returns an array with two elements:

  <div class="table-container">
  | Name    | Type   | Description                                                                      |
  | ------- | ------ | -------------------------------------------------------------------------------- |
  | `state` | object | An object representing the current mouse position and element information.       |
  | `ref`   | object | A ref object that can be used to track the mouse position on a specific element. |
  </div>

  The `state` object has the following properties:

  <div class="table-container">
  | Name                     | Type   | Description                                                                             |
  | ------------------------ | ------ | --------------------------------------------------------------------------------------- |
  | `state.x`                | number | The current horizontal position of the mouse relative to the page.                      |
  | `state.y`                | number | The current vertical position of the mouse relative to the page.                        |
  | `state.elementX`         | number | The current horizontal position of the mouse relative to the element’s top-left corner. |
  | `state.elementY`         | number | The current vertical position of the mouse relative to the element’s top-left corner.   |
  | `state.elementPositionX` | number | The current horizontal position of the element relative to the page.                    |
  | `state.elementPositionY` | number | The current vertical position of the element relative to the page.                      |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useMouse } from "@uidotdev/usehooks";
import Demo from "./Demo";

export default function App() {
  const [mouse, ref] = useMouse();

  const xIntersecting = mouse.elementX > 0 && mouse.elementX < 300;
  const yIntersecting = mouse.elementY > 0 && mouse.elementY < 300;
  const isIntersecting = xIntersecting && yIntersecting;

  return (
    <section>
      <h1>useMouse</h1>
      <article
        ref={ref}
        style={{ width: "300px", height: "300px" }}
        className={isIntersecting ? "active" : ""}
      >
        Use a ref to add coords relative to the element
      </article>
      <Demo {...mouse} />
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useNetworkState.mdx
================================================
---
name: useNetworkState
rank: 6
tagline: Monitor and adapt to network conditions seamlessly with useNetworkState.
sandboxId: usenetworkstate-k4t3qt
previewHeight: 400px
relatedHooks:
  - usepreferredlanguage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useNetworkState React hook delivers real-time insights about the network
  status in your application, helping to adapt app behavior to varying
  connectivity conditions. It offers up-to-date snapshots of the network state,
  such as online/offline status, connection speed, and type. Through its use,
  you can respond effectively to network changes, fostering a seamless user
  experience even under unstable or varying connectivity. Please note, this hook
  is intended for client-side use only.
</HookDescription>

<div class="reference">
  ### Return Value

  The `useNetworkState` hook returns an object representing the current network state with the following properties:

  <div class="table-container">
  | Name          | Type    | Description                                                                                                                                                                                          |
  | ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | online        | boolean | Indicates whether the browser is online or offline.                                                                                                                                                  |
  | downlink      | number  | The effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds.                                                                                 |
  | downlinkMax   | number  | The maximum downlink speed, in megabits per second (Mbps), for the underlying connection technology.                                                                                                 |
  | effectiveType | string  | The effective type of the connection for general web browsing purposes (either 'slow-2g', '2g', '3g', or '4g').                                                                                      |
  | rtt           | number  | The estimated round-trip latency of the connection, in milliseconds.                                                                                                                                 |
  | saveData      | boolean | Whether the user has requested a reduced data usage mode from the user agent.                                                                                                                        |
  | type          | string  | The type of connection a device is using to communicate with the network. It could be one of the following values: 'bluetooth', 'cellular', 'ethernet', 'none', 'wifi', 'wimax', 'other', 'unknown'. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useNetworkState } from "@uidotdev/usehooks";

export default function App() {
  const network = useNetworkState();

  return (
    <section>
      <h1>useNetworkState</h1>
      <table>
        <tbody>
          {Object.keys(network).map((key) => {
            return (
              <tr key={key} className={key}>
                <th>{key}</th>
                <td>{`${network[key]}`}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useObjectState.mdx
================================================
---
name: useObjectState
rank: 38
tagline: Manage complex state objects with useObjectState.
sandboxId: useobjectstate-75lmg2
previewHeight: 350px
relatedHooks:
  - usevisibilitychange
  - useset
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useObjectState hook is useful for managing complex state objects. It
  provides a convenient way to initialize and update state values using a single
  hook. By using this hook, you can easily create and maintain state objects
  with initial values, and then update them through a flexible "handleUpdate"
  function. This function accepts either a callback function or an object,
  allowing you to merge new values into the existing state object.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name         | Type   | Description                         |
  | ------------ | ------ | ----------------------------------- |
  | initialValue | object | (Optional) The initial state value. |
  </div>

  ### Return Value

  The `useObjectState` hook returns an array with the following elements:

  <div class="table-container">
  | Index | Type     | Description                            |
  | ----- | -------- | -------------------------------------- |
  | 0     | object   | The current state object.              |
  | 1     | function | A function to update the state object. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useObjectState } from "@uidotdev/usehooks";

const initialState = {
  team: "Utah Jazz",
  wins: 2138,
  losses: 1789,
  championships: 0,
};

export default function App() {
  const [stats, setStats] = useObjectState(initialState);

  const addWin = () => {
    setStats((s) => ({
      wins: s.wins + 1,
    }));
  };

  const addLoss = () => {
    setStats((s) => ({
      losses: s.losses + 1,
    }));
  };

  const reset = () => {
    setStats(initialState);
  };

  return (
    <section>
      <h1>useObjectState</h1>

      <button className="link" onClick={addWin}>
        Add Win
      </button>
      <button className="link" onClick={addLoss}>
        Add Loss
      </button>

      <button className="link" onClick={() => alert("lol")}>
        Add Championship
      </button>
      <button className="link" onClick={reset}>
        Reset
      </button>

      <table>
        <thead>
          <tr>
            {Object.keys(stats).map((key) => {
              return <th>{key}</th>;
            })}
          </tr>
        </thead>
        <tbody>
          <tr>
            {Object.keys(stats).map((key) => {
              return <td>{`${stats[key]}`}</td>;
            })}
          </tr>
        </tbody>
      </table>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useOrientation.mdx
================================================
---
name: useOrientation
rank: 8
tagline: Manage and respond to changes in device orientation with useOrientation.
sandboxId: useorientation-f04nej
previewHeight: 400px
relatedHooks:
  - usenetworkstate
  - usemediaquery
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useOrientation React Hook simplifies the management of a device’s
  orientation within a React application. It wraps the complexity of listening
  for, handling, and cleaning up after orientation changes into a reusable hook.
  By abstracting this logic, the hook allows you to easily track device
  orientation, resulting in cleaner and more readable code. It adapts to both
  the Screen Orientation API and the deprecated window.orientation property,
  providing flexibility across different browser capabilities.
</HookDescription>

<div class="reference">
  ### Parameters

  This hook doesn’t accept any parameters.

  ### Return Value

  <div class="table-container">
  | Name  | Type   | Description                                                                                                                                                                                 |
  | ----- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | angle | number | The current orientation angle of the device in degrees.                                                                                                                                     |
  | type  | string | The current orientation type of the device (e.g., 'portrait-primary', 'landscape-primary', 'portrait-secondary', 'landscape-secondary'). If the type cannot be determined, it is 'UNKNOWN'. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useOrientation } from "@uidotdev/usehooks";

export default function App() {
  const orientation = useOrientation();

  return (
    <section>
      <h1>useOrientation</h1>

      <article
        style={{ "--angle": `${orientation.angle}deg` }}
        className={orientation.type.toLocaleLowerCase()}
      />
      <table>
        <tbody>
          {Object.keys(orientation).map((key) => {
            return (
              <tr key={key}>
                <th>{key}</th>
                <td>{orientation[key]}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/usePageLeave.mdx
================================================
---
name: usePageLeave
experimental: true
rank: 37
tagline: Track when a user navigates away from a webpage with usePageLeave.
sandboxId: usepageleave-p8hjp3
previewHeight: 300px
relatedHooks:
  - usevisibilitychange
  - useset
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The usePageLeave hook is useful for tracking when a user leaves a webpage or
  navigates away from it. When the mouseout event is triggered, the callback
  function is executed only if the user’s cursor moves outside the webpage or
  onto an element outside the webpage (e.g., the browser’s address bar). This
  hook is beneficial for scenarios where you need to perform specific actions
  when a user leaves your webpage, such as saving user progress, displaying a
  confirmation prompt, or triggering analytics events.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name | Type     | Description                          |
  | ---- | -------- | ------------------------------------ |
  | cb   | function | The callback function to be invoked. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { usePageLeave } from "@uidotdev/usehooks";

export default function App() {
  const [distractions, setDistractions] = React.useState(0);

  usePageLeave(() => {
    setDistractions((d) => d + 1);
  });

  return (
    <section>
      <h1>usePageLeave</h1>
      <p>(Mouse out of the page)</p>
      <h3>
        You've been distracted {distractions}{" "}
        {distractions === 1 ? "time" : "times"}.
      </h3>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/usePreferredLanguage.mdx
================================================
---
name: usePreferredLanguage
rank: 10
tagline: Adapt to user language preferences dynamically with usePreferredLanguage.
sandboxId: usepreferredlanguage-v3dcoh
previewHeight: 300px
relatedHooks:
  - usetoggle
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The usePreferredLanguage hook automatically adapts to the preferred language
  of the user. The hook reactively returns a string that represents the
  preferred language of the user, as set in the browser settings.
</HookDescription>

<div class="reference">
  ### Return Value

  <div class="table-container">
  | Name          | Type   | Description                                                                                                   |
  | ------------- | ------ | ------------------------------------------------------------------------------------------------------------- |
  | language | string | The hook returns a string that represents the preferred language of the user, as set in the browser settings. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { usePreferredLanguage } from "@uidotdev/usehooks";

export default function App() {
  const language = usePreferredLanguage();

  return (
    <section>
      <h1>usePreferredLanguage</h1>
      <p>Change language here - chrome://settings/languages</p>
      <h2>
        The correct date format for <pre>{language}</pre> is{" "}
        <time>{new Date(Date.now()).toLocaleDateString(language)}</time>
      </h2>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/usePrevious.mdx
================================================
---
name: usePrevious
rank: 4
tagline: Track the previous value of a variable with usePrevious.
sandboxId: useprevious-diev3s
previewHeight: 600px
relatedHooks:
  - usehistorystate
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The usePrevious hook is a useful tool for tracking the previous value of a
  variable in a functional component. This can be particularly handy in
  scenarios where it is necessary to compare the current value with the previous
  one, such as triggering actions or rendering based on changes.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name     | Type | Description                                        |
  | -------- | ---- | -------------------------------------------------- |
  | newValue | any  | The new value to track and return the previous of. |
  </div>

  ### Return Value

  <div class="table-container">
  | Name          | Type | Description                                    |
  | ------------- | ---- | ---------------------------------------------- |
  | previousValue | any  | The previous value of the provided `newValue`. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { usePrevious } from "@uidotdev/usehooks";

function getRandomColor() {
  const colors = ["green", "blue", "purple", "red", "pink"];
  return colors[Math.floor(Math.random() * colors.length)];
}

export default function App() {
  const [color, setColor] = React.useState(getRandomColor());
  const previousColor = usePrevious(color);

  const handleClick = () => {
    function getNewColor() {
      const newColor = getRandomColor();
      if (color === newColor) {
        getNewColor();
      } else {
        setColor(newColor);
      }
    }
    getNewColor();
  };

  return (
    <section>
      <h1>usePrevious</h1>
      <button className="link" onClick={handleClick}>
        Next
      </button>
      <article>
        <figure>
          <p style={{ background: `var(--${previousColor})` }} />
          <figcaption>Previous: {previousColor}</figcaption>
        </figure>
        <figure>
          <p style={{ background: `var(--${color})` }} />
          <figcaption>Current: {color}</figcaption>
        </figure>
      </article>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useQueue.mdx
================================================
---
name: useQueue
rank: 23
tagline: Add, remove, and clear element from a queue data structure with useQueue.
sandboxId: usequeue-s7x0yg
previewHeight: 400px
relatedHooks:
  - usemap
  - useset
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useQueue hook is a useful tool for managing a queue of elements within a
  functional component. It allows you to easily add, remove, and clear elements
  from the queue while maintaining the necessary state updates. The hook returns
  an object that includes the functions for manipulating the queue (add, remove,
  and clear), as well as additional properties such as first, last, size, and
  queue.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name         | Type  | Description                                                            |
  | ------------ | ----- | ---------------------------------------------------------------------- |
  | initialValue | array | (Optional) The initial value for the queue. Default is an empty array. |
  </div>

  ### Return Value

  The `useQueue` hook returns an object with the following properties and methods:

  <div class="table-container">
  | Name   | Type     | Description                                           |
  | ------ | -------- | ----------------------------------------------------- |
  | add    | function | Adds an element to the end of the queue.              |
  | remove | function | Removes and returns the first element from the queue. |
  | clear  | function | Clears the queue, removing all elements.              |
  | first  | any      | The first element in the queue.                       |
  | last   | any      | The last element in the queue.                        |
  | size   | number   | The number of elements in the queue.                  |
  | queue  | array    | The current array representing the queue.             |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useQueue } from "@uidotdev/usehooks";

function QueueDemo({ first, last, size, queue }) {
  return (
    <figure>
      <article>
        <p>Front</p>
        <ul>
          {queue.map((item, i) => {
            const isFirst = first === item;
            const isLast = last === item;
            if (isFirst) {
              return <li key={i}>First: {item}</li>;
            }
            if (isLast) {
              return <li key={i}>Last: {item}</li>;
            }
            return <li key={i}>Item: {item}</li>;
          })}
        </ul>
        <p>Back</p>
      </article>
      <figcaption>{size} items in the queue</figcaption>
    </figure>
  );
}

export default function App() {
  const { add, remove, clear, first, last, size, queue } = useQueue([1, 2, 3]);

  return (
    <div>
      <header>
        <h1>UseQueue</h1>
        <button className="link" onClick={() => add((last || 0) + 1)}>
          Add
        </button>
        <button disabled={size === 0} className="link" onClick={() => remove()}>
          Remove
        </button>
        <button disabled={size === 0} className="link" onClick={() => clear()}>
          Clear
        </button>
      </header>
      <QueueDemo queue={queue} size={size} first={first} last={last} />
    </div>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useRandomInterval.mdx
================================================
---
name: useRandomInterval
experimental: true
rank: 17
tagline: Execute a callback function at a random interval with useRandomInterval.
sandboxId: userandominterval-rh8q99
previewHeight: 500px
relatedHooks:
  - usecontinuousretry
  - useintervalwhen
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useRandomInterval hook is useful for executing a callback function at
  random intervals within a specified range. It provides a way to create an
  interval that varies dynamically based on minimum and maximum delay values. By
  using this hook, you can easily implement features such as periodic data
  updates, animations, or any other functionality that requires dynamic and
  random timing. The hook manages the interval internally, ensuring that it is
  cleared when the component unmounts or when the delay values change.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name             | Type     | Description                                                         |
  | ---------------- | -------- | ------------------------------------------------------------------- |
  | cb               | function | The callback function to be executed at random intervals.           |
  | options          | object   | An object containing the following options.                         |
  | options.minDelay | number   | The minimum delay in milliseconds between each callback invocation. |
  | options.maxDelay | number   | The maximum delay in milliseconds between each callback invocation. |
  </div>

  ### Return Value

  <div class="table-container">
  | Type     | Description                                                             |
  | -------- | ----------------------------------------------------------------------- |
  | function | A function to clear the timeout and stop the random interval execution. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useRandomInterval } from "@uidotdev/usehooks";
import HeartsDemo from "./Heart";

export default function App() {
  const demo = React.useRef(new HeartsDemo());
  const clear = useRandomInterval(
    () => {
      demo.current.addHeart();
    },
    { minDelay: 50, maxDelay: 3000 }
  );

  React.useEffect(() => {
    demo.current.loop();
  }, []);

  return (
    <section>
      <h1>useRandomInterval</h1>
      <button className="link" onClick={clear}>
        Stop
      </button>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useRenderCount.mdx
================================================
---
name: useRenderCount
rank: 16
tagline: Identify unnecessary re-renders and monitor update frequency with useRenderCount.
sandboxId: userendercount-ghn1dg
previewHeight: 320px
relatedHooks:
  - userenderinfo
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useRenderCount hook is a useful tool for tracking the number of times a
  component renders or re-renders. Each time the component renders, the count
  value is incremented, allowing you to keep track of the render count. This can
  be helpful in optimizing performance, identifying unnecessary re-renders, or
  monitoring how frequently a component is being updated. The hook provides a
  simple and efficient way to gain insights into the rendering behavior of your
  components.
</HookDescription>

<div class="reference">
  ### Return Value
  <div class="table-container">
  | Name        | Type   | Description                                     |
  | ----------- | ------ | ----------------------------------------------- |
  | renderCount | number | The number of times the component has rendered. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useRenderCount } from "@uidotdev/usehooks";

export default function App() {
  const renderCount = useRenderCount();
  const [count, setCount] = React.useState(0);

  return (
    <section>
      <header>
        <h1>useRenderCount</h1>
        <h6>(strict mode on)</h6>
      </header>
      <button className="primary" onClick={() => setCount((c) => c + 1)}>
        Increment
      </button>
      <p>Count: {count}</p>
      <p>Render Count: {renderCount}</p>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useRenderInfo.mdx
================================================
---
name: useRenderInfo
rank: 15
tagline: Debug renders and improve performance with useRenderInfo.
sandboxId: userenderinfo-njhqlg
previewHeight: 400px
relatedHooks:
  - userendercount
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useRenderInfo hook is useful for tracking and logging rendering
  information in a component. It keeps track of the number of renders, the time
  elapsed since the last render, and the timestamp of the current render. This
  hook is particularly helpful during development as it provides insights into
  the rendering behavior of a component, allowing developers to optimize
  performance and identify potential issues.
</HookDescription>

<div class="reference">
  ### Return Value

  <div class="table-container">
  | Name                 | Type   | Description                                                       |
  | -------------------- | ------ | ----------------------------------------------------------------- |
  | info                 | object | An object containing information about the component’s rendering. |
  | info.name            | string | The name of the component.                                        |
  | info.renders         | number | The number of times the component has rendered.                   |
  | info.sinceLastRender | number | The time elapsed in milliseconds since the last render.           |
  | info.timestamp       | number | The timestamp of the current render.                              |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useRenderInfo } from "@uidotdev/usehooks";

export default function App() {
  const info = useRenderInfo("App");

  const [count, setCount] = React.useState(0);

  return (
    <section>
      <h1>useRenderInfo</h1>
      <button className="primary" onClick={() => setCount(count + 1)}>
        Re-Render
      </button>
      <table>
        <thead>
          <tr>
            <th colSpan={2}>Render Info</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(info).map((key) => {
            return (
              <tr key={key}>
                <th>{key}</th>
                <td>{info[key]}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useScript.mdx
================================================
---
name: useScript
rank: 14
tagline: Load and manage external JavaScript scripts with useScript.
sandboxId: usescript-dux91r
previewHeight: 300px
relatedHooks:
  - usefetch
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useScript hook is useful for dynamically loading external JavaScript
  scripts into a React component. It manages the loading and status of the
  script, allowing you to conditionally render components or perform actions
  based on whether the script has been successfully loaded or encountered an
  error. The hook keeps track of the script’s status and provides this status as a return value. Additionally,
  it offers options to remove the script when the component is unmounted,
  ensuring proper cleanup.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name             | Type   | Description |
  | ---------------- | ------ | ----------- |
  | src              | string | This is the URL source of the script to be loaded. |
  | options          | object | This is an optional configuration object provided when calling `useScript`. It currently accepts one property `removeOnUnmount` which when set to `true`, will remove the script tag from the document body on component unmount. |
  </div>

  ### Return Values

  <div class="table-container">
  | Name   | Type   | Description |
  | ------ | ------ | ----------- |
  | status | string | This represents the status of the script load, `loading`, `ready`, `error`, or `unknown`. An `unknown` script is one that previously exists in the document, but was not added via `useScript`.  |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useScript } from "@uidotdev/usehooks";
import ScriptMeta from './ScriptMeta'

export default function App() {
  const status = useScript(
    `https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js`,
    {
      removeOnUnmount: false,
    }
  );

  React.useEffect(() => {
    if (typeof window.$$ !== "undefined") {
      const id = document.id("moo");
      id.setStyle("background-color", "var(--green)");
    }
  }, [status]);

  const isReady = status === "ready";

  return (
    <section>
      <h1>useScript</h1>
      <p>
        <span id="moo" className={isReady ? "ready" : ""} />
        <label>Status: {status}</label>
      </p>
      {status === "ready" && (
        <ScriptMeta title="MooTools" status={status} meta={window.MooTools} />
      )}
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useSessionStorage.mdx
================================================
---
name: useSessionStorage
rank: 9
tagline: Store, retrieve, and synchronize data from the browser’s session storage with useSessionStorage.
sandboxId: usesessionstorage-yoodu4
previewHeight: 400px
relatedHooks:
  - uselocalstorage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useSessionStorage hook allows you to store and retrieve data in the
  browser’s session storage, providing a way to persist data across multiple
  page views or browser refreshes. The hook utilizes the window.sessionStorage
  API to store and retrieve data in the session storage. It automatically
  synchronizes the stored data with the local state of the component using the
  hook. Additionally, it listens for changes in the session storage and updates
  the local state accordingly, ensuring that the component reflects the latest
  stored values.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name         | Type   | Description                                                                                |
  | ------------ | ------ | ------------------------------------------------------------------------------------------ |
  | key          | string | The key used to access the session storage value.                                          |
  | initialValue | any    | The initial value to use if there is no item in the session storage with the provided key. |
  </div>

  ### Return Values

  <div class="table-container">
  | Name           | Type     | Description                                                                                                                                                                                                       |
  | -------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | localState     | any      | The current state of the value stored in session storage.                                                                                                                                                         |
  | handleSetState | function | A function to set the state of the value in the session storage. This function accepts a new value or a function that returns a new value. The value is also saved in the session storage under the provided key. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useSessionStorage } from "@uidotdev/usehooks";
import { cart } from "./icons";

export default function App() {
  const [count, setCount] = useSessionStorage("woot", 0);

  return (
    <section>
      <h1>useSessionStorage</h1>
      <div>
        <button className="link" onClick={() => setCount(0)}>
          Clear Cart
        </button>
        <button
          className="link"
          onClick={() => {
            window.location.reload();
          }}
        >
          Reload Window
        </button>
        <button
          className="link"
          onClick={() => {
            window.sessionStorage.clear();
            window.location.reload();
          }}
        >
          Clear Session
        </button>
      </div>
      <button className="primary" onClick={() => setCount(count + 1)}>
        <span>{cart}</span> Add To Cart
      </button>
      <button className="cart">
        <span>{cart}</span>{" "}
        <span
          key={count}
          className={`cart-count ${count > 0 ? "animate" : ""}`}
        >
          {count}
        </span>
      </button>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useSet.mdx
================================================
---
name: useSet
rank: 30
tagline: Synchronize and update state based on the Set data structure with useSet.
sandboxId: useset-2jx1ou
previewHeight: 500px
relatedHooks:
  - usemap
  - usequeue
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useSet hook is useful for managing and manipulating the Set data structure
  within a React component. It provides a way to create and maintain a set of
  values, offering additional functionality through custom methods like "add,"
  "clear," and "delete." By utilizing this hook, developers can easily update
  and track changes to the set, triggering re-renders of the component whenever
  modifications occur.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name   | Type  | Description                            |
  | ------ | ----- | -------------------------------------- |
  | values | array | (Optional) Initial values for the set. |
  </div>

  ### Return Value

  <div class="table-container">
  | Name | Type | Description                                            |
  | ---- | ---- | ------------------------------------------------------ |
  | set  | set  | An instance of the `Set` object with enhanced methods. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useSet } from "@uidotdev/usehooks";

function format(val) {
  return val.toLocaleLowerCase().replace(/\s/g, "");
}

export default function App() {
  const [value, setValue] = React.useState("");
  const set = useSet([
    "benadam11",
    "tylermcginnis",
    "lynnandtonic",
    "alexbrown40",
    "uidotdev",
    "bytesdotdev",
    "reactnewsletter",
  ]);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const username = formData.get("username");
    set.add(format(username));
    setValue("");
    e.target.reset();
    e.target.focus();
  };

  const hasError = set.has(value);

  return (
    <section>
      <h1>useSet</h1>
      <p>Check if your username is available</p>
      <article>
        <form className={hasError ? "error" : ""} onSubmit={handleSubmit}>
          <span>@</span>
          <input
            type="text"
            name="username"
            placeholder="Enter a username"
            onChange={(e) => {
              setValue(format(e.target.value));
            }}
          />
        </form>
        {hasError && <label>Woops that user is taken</label>}
      </article>

      <table>
        <tbody>
          {Array.from(set.values()).map((username) => {
            const match = username === value;
            return (
              <tr key={username}>
                <th>username</th>
                <td
                  style={{
                    borderColor: match ? "var(--red)" : "var(--charcoal)",
                  }}
                >
                  {username}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useThrottle.mdx
================================================
---
name: useThrottle
rank: 29
tagline: Throttle computationally expensive operations with useThrottle.
sandboxId: usethrottle-xzfoz7
previewHeight: 300px
relatedHooks:
  - usefetch
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useThrottle hook offers a controlled way to manage execution frequency in
  a React application. By accepting a value and an optional interval, it ensures
  that the value is updated at most every interval milliseconds. This is
  particularly helpful for limiting API calls, reducing UI updates, or
  mitigating performance issues by throttling computationally expensive
  operations.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name     | Type   | Description                                              |
  | -------- | ------ | -------------------------------------------------------- |
  | value    | any    | The value to throttle.                                   |
  | interval | number | (Optional) The interval in milliseconds. Default: 500ms. |
  </div>

  ### Return Value

  <div class="table-container">
  | Name           | Type | Description                                                    |
  | -------------- | ---- | -------------------------------------------------------------- |
  | throttledValue | any  | The throttled value that is updated at most once per interval. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useThrottle } from "@uidotdev/usehooks";

export default function App() {
  const [val, setVal] = React.useState("");
  const throttledValue = useThrottle(val);

  return (
    <section>
      <h1>useThrottle</h1>
      <input
        placeholder="Type some text"
        style={{ background: "var(--charcoal)" }}
        type="text"
        value={val}
        onChange={(e) => {
          setVal(e.target.value);
        }}
      />
      <p>Val: {val}</p>
      <p>Throttled: {throttledValue}</p>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useTimeout.mdx
================================================
---
name: useTimeout
experimental: true
rank: 25
tagline: Create delayed actions or timed events using useTimeout.
sandboxId: usetimeout-7fcfr1
previewHeight: 450px
relatedHooks:
  - useinterval
  - useintervalwhen
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useTimeout hook allows you to set up a timed callback in your components.
  The hook returns a function (handleClearInterval) that can be used to manually
  cancel or clear the timer if needed. This hook is beneficial for scenarios
  where delayed actions or timed events are required, such as implementing
  loading delays, animations, or auto-updating components.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name | Type     | Description                                                       |
  | ---- | -------- | ----------------------------------------------------------------- |
  | cb   | function | The callback function to be executed after the specified timeout. |
  | ms   | number   | The duration of the timeout in milliseconds.                      |
  </div>

  ### Return Value

  <div class="table-container">
  | Name         | Type     | Description                                                               |
  | ------------ | -------- | ------------------------------------------------------------------------- |
  | clearTimeout | function | A function to clear the timeout and cancel the execution of the callback. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useTimeout } from "@uidotdev/usehooks";

function Bomb({ hasExploded, hasDefused, handleClick }) {
  if (hasExploded) {
    return (
      <figure>
        <span role="img" aria-label="Explosion Emoji">
          💥
        </span>
        <figcaption>You lose</figcaption>
      </figure>
    );
  }

  if (hasDefused) {
    return (
      <figure>
        <span role="img" aria-label="Explosion Emoji">
          🎉
        </span>
        <figcaption>You Win</figcaption>
      </figure>
    );
  }

  return (
    <button className="bomb" onClick={handleClick}>
      <span role="img" aria-label="Dynamite Emoji">
        🧨
      </span>
    </button>
  );
}

export default function App() {
  const [hasDefused, setHasDefused] = React.useState(false);
  const [hasExploded, setHasExploded] = React.useState(false);

  const clear = useTimeout(() => {
    setHasExploded(!hasExploded);
  }, 1000);

  const handleClick = () => {
    clear();
    setHasDefused(true);
  };

  return (
    <section>
      <h1>useTimeout</h1>
      <p>You have 1s to defuse (click) the bomb or it will explode </p>
      <button
        className="link"
        onClick={() => {
          window.location.reload();
        }}
      >
        Reload
      </button>
      <Bomb
        hasDefused={hasDefused}
        hasExploded={hasExploded}
        handleClick={handleClick}
      />
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useToggle.mdx
================================================
---
name: useToggle
rank: 34
tagline: A hook to toggle a boolean value with useToggle.
sandboxId: usetoggle-tcj48q
previewHeight: 300px
relatedHooks:
  - uselongpress
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  Basically, what this hook does is that, it takes a parameter with value true
  or false and toggles that value to opposite. It’s useful when we want to take
  some action into its opposite action, for example: show and hide modal, show
  more/show less text, open/close side menu.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name         | Type    | Description                                       |
  | ------------ | ------- | ------------------------------------------------- |
  | initialValue | boolean | (Optional) The initial value of the toggle state. |
  </div>

  ### Return Value

  The `useToggle` hook returns an array with the following elements:

  <div class="table-container">
  | Index | Type     | Description                                   |
  | ----- | -------- | --------------------------------------------- |
  | 0     | boolean  | The current state of the toggle.              |
  | 1     | function | A function to toggle the state of the toggle. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useToggle } from "@uidotdev/usehooks";

function ToggleDemo({ on, toggle }) {
  return (
    <div>
      <label className="toggle">
        <input
          onChange={toggle}
          className="toggle-checkbox"
          type="checkbox"
          checked={on}
        />
        <div className="toggle-switch"></div>
        <span className="toggle-label">{on ? "On" : "Off"}</span>
      </label>
    </div>
  );
}

export default function App() {
  const [on, toggle] = useToggle(true);

  return (
    <section>
      <h1>UseToggle</h1>
      <button disabled={on} className="link" onClick={() => toggle(true)}>
        Turn On
      </button>
      <button disabled={!on} className="link" onClick={() => toggle(false)}>
        Turn Off
      </button>
      <button className="link" onClick={toggle}>
        Toggle
      </button>
      <button className="link" onClick={() => toggle("nope")}>
        (Also toggles)
      </button>
      <ToggleDemo toggle={toggle} on={on} />
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useVisibilityChange.mdx
================================================
---
name: useVisibilityChange
rank: 13
tagline: Track document visibility and respond to changes with useVisibilityChange.
sandboxId: usevisibilitychange-8yxnwy
previewHeight: 200px
relatedHooks:
  - useorientation
  - usenetworkstate
  - usemediaquery
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useVisibilityChange hook is useful for tracking the visibility state of a
  document or web page. It allows you to easily detect when the document is
  visible or hidden, and perform certain actions based on that information. The
  hook returns a boolean value indicating whether the document is currently
  visible or not, allowing components to react accordingly and update their
  rendering or behavior based on the visibility state.
</HookDescription>

<div class="reference">
  ### Return Value

  <div class="table-container">
  | Name            | Type    | Description                                                     |
  | --------------- | ------- | --------------------------------------------------------------- |
  | documentVisible | boolean | `true` if the document is currently visible, `false` otherwise. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useVisibilityChange } from "@uidotdev/usehooks";

export default function App() {
  const documentVisible = useVisibilityChange();
  const [tabAwayCount, setTabAwayCount] = React.useState(0);

  React.useEffect(() => {
    if (documentVisible === false) {
      setTabAwayCount((c) => c + 1);
    }
  }, [documentVisible]);

  return (
    <section>
      <h1>useVisibilityChange</h1>
      <div>Tab Away Count: {tabAwayCount}</div>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useWindowScroll.mdx
================================================
---
name: useWindowScroll
rank: 45
tagline: Track and manipulate the scroll position of a web page with useWindowScroll.
sandboxId: usewindowscroll-pdw6f9
previewHeight: 600px
relatedHooks:
  - usemeasure
  - usewindowsize
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useWindowScroll hook is useful for tracking and manipulating the scroll
  position of a web page within a React component. It allows you to easily
  access the current scroll coordinates (x and y) through the "state" object
  returned by the hook. Additionally, the hook provides a "scrollTo" function
  that can be used to programmatically scroll to a specific position on the
  page. This hook is helpful when building components that require dynamic
  behavior based on the scroll position, such as lazy-loading content, infinite
  scrolling, or implementing smooth scrolling animations.
</HookDescription>

<div class="reference">
  ### Return Value

  The `useWindowScroll` hook returns an array with two elements:

  <div class="table-container">
  | Name       | Type     | Description                                                              |
  | ---------- | -------- | ------------------------------------------------------------------------ |
  | `state`    | object   | An object representing the current window scroll position.               |
  | `scrollTo` | function | A function that can be used to scroll the window to a specific position. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useWindowScroll } from "@uidotdev/usehooks";

export default function App() {
  const [{ x, y }, scrollTo] = useWindowScroll();
  return (
    <section>
      <header>
        <h1>useWindowScroll</h1>
        <button className="link" onClick={() => scrollTo(0, 1000)}>
          Scroll To (0, 1000)
        </button>
        <button
          className="link"
          onClick={() => scrollTo({ left: 0, top: 2000, behavior: "smooth" })}
        >
          Scroll To (0, 2000) (Smoothly)
        </button>
        <button
          className="link"
          onClick={() => scrollTo({ left: 0, top: 0, behavior: "smooth" })}
        >
          Back To The Top
        </button>
      </header>

      {new Array(50).fill().map((_, index) => {
        return <p key={index}>{index}</p>;
      })}
      <aside style={{ position: "fixed", bottom: 0, right: 0 }}>
        Coordinates <span className="x">x: {x}</span>{" "}
        <span className="y">y: {y}</span>{" "}
      </aside>
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/content/hooks/useWindowSize.mdx
================================================
---
name: useWindowSize
rank: 3
tagline: Track the dimensions of the browser window with useWindowSize.
sandboxId: usewindowsize-vxk6xf
previewHeight: 500px
relatedHooks:
  - usemeasure
  - usewindowscroll
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useWindowSize hook is a useful for retrieving and tracking the dimensions
  of the browser window within a React component. It attaches an event listener
  to the "resize" event, ensuring that the size is updated dynamically whenever
  the window is resized. The hook returns the "size" object, enabling components
  to access and utilize the window dimensions for various purposes, such as
  responsive layout adjustments, conditional rendering, or calculations based on
  the available space.
</HookDescription>

<div class="reference">
  ### Return Value

  The `useWindowSize` hook returns an object with the following properties:

  <div class="table-container">
  | Name   | Type   | Description                                  |
  | ------ | ------ | -------------------------------------------- |
  | width  | number | The current width of the window, in pixels.  |
  | height | number | The current height of the window, in pixels. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useWindowSize } from "@uidotdev/usehooks";

function Browser({ size }) {
  return (
    <div
      data-testid="browser"
      className="browser"
      style={{ width: size.width / 4, height: size.height / 4 }}
    />
  );
}

export default function App() {
  const size = useWindowSize();

  return (
    <section>
      <h1>useWindowSize</h1>
      <p>Resize the window</p>
      <table>
        <tbody>
          <tr>
            <th>width</th>
            <td>{size.width}</td>
          </tr>
          <tr>
            <th>height</th>
            <td>{size.height}</td>
          </tr>
        </tbody>
      </table>
      <Browser size={size} />
    </section>
  );
}
```

</StaticCodeContainer>


================================================
FILE: usehooks.com/src/env.d.ts
================================================
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />


================================================
FILE: usehooks.com/src/layouts/Layout.astro
================================================
---
import "../styles/globals.css";
export interface Props {
  title: string;
  description: string;
  ogImage?: URL;
  url?: URL;
}

const {
  title,
  description,
  ogImage = new URL("/meta/og.jpg", Astro.url),
} = Astro.props;

const pathname = Astro.url.pathname;

const url =
  pathname[pathname.length - 1] === "/"
    ? new URL(pathname.slice(0, pathname.length - 1), Astro.site)
    : new URL(Astro.url.pathname, Astro.site);
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="/favicon.png" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta name="author" content="ui.dev" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta content="@uidotdev" name="twitter:site" />
    <meta content="@uidotdev" name="twitter:creator" />
    <meta
      content={description}
      name="twitter:description"
      property="og:description"
    />
    <meta content={url} property="og:url" />
    <meta content={url} property="twitter:url" />
    <meta content={title} name="twitter:title" property="og:title" />
    <meta content={ogImage} property="og:image" />
    <meta content={ogImage} name="twitter:image" />
    <link rel="canonical" href={url} />
    <link
      rel="preload"
      href="/fonts/outfit-v4-latin-regular.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="/fonts/outfit-v4-latin-500.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="/fonts/outfit-v4-latin-700.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="/fonts/outfit-v4-latin-900.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="/fonts/paytone-one-v16-latin-regular.woff2"
      as="font"
      crossorigin="anonymous"
    />

    <link
      rel="preload"
      href="/fonts/firacode-regular.woff2"
      as="font"
      crossorigin="anonymous"
    />

    <script
      defer
      src="/stats/js/script.js"
      data-api="/stats/api/event"
      data-domain="usehooks.com"
    ></script>

    <script defer>
      !(function (f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function () {
          n.callMethod
            ? n.callMethod.apply(n, arguments)
            : n.queue.push(arguments);
        };
        if (!f._fbq) f._fbq = n;
        n.push = n;
        n.loaded = !0;
        n.version = "2.0";
        n.queue = [];
        t = b.createElement(e);
        t.async = !0;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s);
      })(
        window,
        document,
        "script",
        "https://connect.facebook.net/en_US/fbevents.js"
      );
      fbq("init", "186849069509023");
      fbq("track", "PageView");
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>


================================================
FILE: usehooks.com/src/pages/404.astro
================================================
---
import Layout from '../layouts/Layout.astro';
import NavInternal from '../sections/NavInternal.astro';
import Footer from '../sections/Footer.astro';
---

<Layout
	title="Page not found."
	description="A collection of modern, server-safe React hooks – from the ui.dev team"
>
	<NavInternal />
	<main>
		<h1>404</h1>
		<p>If you think this page should exist, email <a href="mailto:hi@ui.dev">hi@ui.dev</a>.</p>
	</main>
	<Footer />
</Layout>

<style>
	body {
		min-height: 100lvh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	main {
		width: 100%;
		max-width: 960px;
		margin-top: 1rem;
		padding: 1rem 0;
		text-align: center;
	}
	main h1 {
		width: 100%;
		margin-bottom: 2rem;
		font-size: var(--font-lg);
	}
</style>


================================================
FILE: usehooks.com/src/pages/[hook].astro
================================================
---
import { CollectionEntry, getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import NavInternal from "../sections/NavInternal.astro";
import Footer from "../sections/Footer.astro";
import Install from "../components/Install.astro";
import HooksList from "../components/search/HooksList";

export async function getStaticPaths() {
  const hooks = await getCollection("hooks");

  return hooks.map((hook) => {
    return {
      params: {
        hook: hook.slug,
      },
      props: {
        hook,
      },
    };
  });
}

interface Props {
  hook: CollectionEntry<"hooks">;
}

const { hook } = Astro.props;
const { Content } = await hook.render();
const { name, tagline, experimental } = hook.data;
const ogImage = new URL(`/meta/${name.toLowerCase()}.png`, Astro.url);
const installSnippet = experimental
  ? `npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental`
  : `npm i @uidotdev/usehooks`;

const hooks = await getCollection("hooks").then((hooks) => {
  return hooks.filter((h) => {
    return h.slug !== hook.slug;
  });
});
---

<Layout
  title={`${name} React Hook – useHooks`}
  description={tagline}
  ogImage={ogImage}
>
  <NavInternal />
  <main>
    <section>
      <a href="/" class="logo-useHooks logo image">
        <img
          src="/img/logo-useHooks.svg"
          width="546"
          height="80"
          alt="useHooks"
          class="logo-useHooks"
        />
      </a>
      <header>
        <h1 class="title">{name}</h1>
        <p class="tagline">{tagline}</p>
      </header>
      <div>
        <h2>Install:</h2>
        {
          experimental && (
            <p class="experimental">
              Note: This hook depends on React’s experimental useEffectEvent.
            </p>
          )
        }
        <Install text={installSnippet} />
      </div>
      <Content />
    </section>
    <div class="mt-12">
      <h2>More Hooks:</h2>
      <HooksList client:load hooks={hooks} />
    </div>
  </main>
  <Footer />

  <style>
    body {
      min-height: 100lvh;
      display: flex;
      flex-direction: column;
    }

    main {
      width: 100%;
      max-width: 980px;
      margin: 4rem auto;
    }

    section {
      padding: clamp(0.5rem, 4vw, 3rem);
      padding-top: 0;
      display: flex;
      flex-direction: column;
      gap: clamp(1.2rem, 6vw, 3rem);
      background-color: var(--charcoal);
      border-radius: 0.8rem;
    }

    header {
      display: grid;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem 1rem;
    }

    .tagline {
      max-width: 42ch;
    }

    .logo-useHooks {
      width: 180px;
      height: auto;
      transform: translateY(-30%);
    }

    .title {
      color: var(--blue);
      text-transform: none;
      font-family: var(--font-outfit);
      font-size: clamp(1.6rem, 5vw, 2.6rem);
      font-weight: 600;
    }

    .install,
    .install code {
      background-color: var(--coal);
    }

    .install .copy-btn:hover,
    .install .copy-btn:focus-visible {
      background-color: var(--charcoal);
    }

    main :global(h2) {
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      margin-bottom: 1rem;
    }

    main :global(code) {
      background-color: var(--coal);
    }

    .experimental {
      font-size: 1.1rem;
      font-style: italic;
      margin-bottom: 1rem;
    }

    @media screen and (max-width: 500px) {
      .experimental ~ .install {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    :global(.reference) {
      font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    }

    :global(.reference > * + *) {
      margin-top: 1.5rem;
    }

    :global(.reference h3) {
      font-size: clamp(0.9rem, 2vw, 1.1rem);
    }

    :global(.reference .table-container) {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 0.07rem solid rgba(249, 244, 218, 0.1);
    }

    :global(.reference table) {
      border-radius: 0.9rem;
      font-size: clamp(1rem, 2.1vw, 1.2rem);
    }

    :global(.reference h3:not(:first-child)) {
      margin-top: 2rem;
    }

    :global(.reference thead) {
      /* border-bottom: 0.07rem solid rgba(249, 244, 218, 0.1); */
      background-color: rgba(249, 244, 218, 0.1);
      font-size: var(--font-sm);
      text-align: left;
    }

    :global(.reference tr:not(:last-of-type)) {
      border-bottom: 0.07rem solid rgba(249, 244, 218, 0.1);
    }

    :global(.reference td),
    :global(.reference th) {
      padding: 0.5rem 1.2rem 0.5rem 0.75rem;
    }

    :global(.reference td:not(:last-of-type)),
    :global(.reference th:not(:last-of-type)) {
      min-width: 10ch;
    }

    :global(.reference td:last-of-type),
    :global(.reference th:last-of-type) {
      width: 100%;
      min-width: 300px;
    }

    :global(.sp-preview-container),
    :global(.sp-preview-container iframe) {
      background: var(--coal) !important;
    }

    :global(pre) {
      overflow: auto;
      width: 100%;
      background-color: transparent !important;
      padding: 2rem;
      border-radius: 0.5rem;
    }

    :global(pre code) {
      font-size: 1rem;
      display: block;
      font-family: "Fira Code", monospace;
    }
  </style>
</Layout>


================================================
FILE: usehooks.com/src/pages/index.astro
================================================
---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import NavMain from "../sections/NavMain.astro";
import HomeHero from "../sections/HomeHero.astro";
import HooksList from "../components/search/HooksList";
import Footer from "../sections/Footer.astro";

const hooks = await getCollection("hooks");
---

<Layout
  title="useHooks – The React Hooks Library"
  description="A collection of modern, server-safe React hooks – from the ui.dev team"
>
  <NavMain />
  <HomeHero />
  <HooksList client:load hooks={hooks} />
  <Footer />
</Layout>


================================================
FILE: usehooks.com/src/sections/Footer.astro
================================================
---
---

<footer class="main-footer">
  <a href="/" class="logo image">
    <img src="/img/logo-useHooks.svg" width="546" height="80" alt="useHooks" />
  </a>
  <a href="https://ui.dev" class="byline">by ui.dev</a>
  <nav>
    <a href="https://github.com/uidotdev/usehooks">View the Repo</a>
    <a href="https://bytes.dev">JavaScript Newsletter</a>
    <a href="https://reactnewsletter.com">React Newsletter</a>
    <a href="https://react.gg?s=usehooks">Learn React</a>
    <a href="https://query.gg">Learn React Query</a>
  </nav>
</footer>

<style>
  .main-footer {
    width: 100%;
    margin-top: 4rem;
    padding: var(--body-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    border-radius: 0.5rem;
    border: var(--border-dark);
    font-size: var(--font-sm);
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
    text-align: center;
  }

  .logo {
    width: 180px;
  }

  .byline {
    margin-top: -0.5rem;
    padding: 0.3em 0.5em;
    display: inline-block;
    border-radius: 0.3em;
    background-color: var(--charcoal);
  }

  .byline:hover {
    background-color: var(--yellow);
    color: var(--charcoal);
  }

  nav a:hover {
    text-decoration: underline;
  }
</style>


================================================
FILE: usehooks.com/src/sections/HomeHero.astro
================================================
---
import Install from '../components/Install.astro';
import { getCollection } from 'astro:content';
const hooksMarquee1 = (await getCollection('hooks')).slice(0,25);
const hooksMarquee2 = (await getCollection('hooks')).slice(25,50);
---

<header class="hero">
	<img src="/img/logo-useHooks.svg" width="546" height="80" alt="useHooks" />
	<h1>A collection of modern, server-safe React hooks – from the ui.dev team</h1>
	<Install text="npm i @uidotdev/usehooks" />

	<div class="marquee marquee-left">
		<ul class="marquee-content">
			{hooksMarquee1.map(hook => (
				<li>
					<a href={`/${hook.slug}`} tabindex="-1">{hook.data.name}</a>
				</li>
			))}
		</ul>
		<ul class="marquee-content">
			{hooksMarquee1.map(hook => (
				<li>
					<a href={`/${hook.slug}`} tabindex="-1">{hook.data.name}</a>
				</li>
			))}
		</ul>
	</div>
	<div class="marquee marquee-right">
		<ul class="marquee-content">
			{hooksMarquee2.map(hook => (
				<li>
					<a href={`/${hook.slug}`} tabindex="-1">{hook.data.name}</a>
				</li>
			))}
		</ul>
		<ul class="marquee-content">
			{hooksMarquee2.map(hook => (
				<li>
					<a href={`/${hook.slug}`} tabindex="-1">{hook.data.name}</a>
				</li>
			))}
		</ul>
	</div>
</header>

<style>
	.hero {
		padding: 2em 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.hero h1 {
		margin: 1.2em 0;
		max-width: 27ch;
		text-align: center;
		font-family: outfit;
		font-size: clamp(1.2rem, 2.5vw, 1.5rem);
		font-weight: 400;
		text-transform: none;
	}

	.hero p {
		font-size: 20px;
		margin-top: .5rem;
		margin-bottom: .75rem;
	}

	.hero img {
		width: clamp(20rem, 50vw, 30rem);
	}

	.hero .install {
		max-width: 40rem;
		margin: 2.5rem 0 4rem;
	}

	.marquee {
		--gap: 1rem;
		width: calc(100% + var(--body-padding) * 2);
		padding: .7rem 0;
		display: flex;
		overflow: hidden;
		user-select: none;
		gap: var(--gap);
	}

	.marquee-content {
		flex-shrink: 0;
		display: flex;
		justify-content: space-around;
		min-width: 100%;
		gap: var(--gap);
		animation: scroll 200s linear infinite;
	}

	@media (prefers-reduced-motion) {
		.marquee-content {
			animation: none;
		}
	}

	.marquee-right .marquee-content {
		animation-direction: reverse;
	}

	.marquee-content li a {
		padding: .3rem .6rem;
		background-color: var(--white);
		border-radius: .3rem;
		border: var(--border-dark);
		box-shadow: 0 .5rem 0 -.1rem var(--yellow),
					0 .55rem 0 var(--charcoal);
		color: var(--charcoal);
		font-size: .9rem;
	}

	.marquee:hover .marquee-content {
		animation-play-state: paused;
	}

	@keyframes scroll {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(calc(-100% - var(--gap)));
		}
	}
</style>


================================================
FILE: usehooks.com/src/sections/NavInternal.astro
================================================
---
import LogoGithub from '../components/LogoGithub.astro';
---

<nav class="nav-internal">
	<a href="/" class="back image">
		<svg xmlns="http://www.w3.org/2000/svg" id="b" viewBox="0 0 36 24"><path fill="none" stroke="#f6f1d7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M34.14 12H3.96M14.69 22.85 1.86 12 14.69 1.15"/></svg>
		All hooks
	</a>
	<LogoGithub />
</nav>

<style>
	.nav-internal {
		width: 100%;
		height: var(--nav-height);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.back {
		display: flex;
		gap: .6rem;
		font-size: clamp(1rem, 3vw, 1.3rem);
	}

	.back:hover {
		text-decoration: underline;
	}

	.back svg {
		width: 1.5rem;
		height: auto;
	}
</style>


================================================
FILE: usehooks.com/src/sections/NavMain.astro
================================================
---
import Logo from '../components/Logo.astro';
import LogoGithub from '../components/LogoGithub.astro';
---

<nav class="nav-main">
	<Logo />
	<LogoGithub />
</nav>

<style>
	.nav-main {
		height: var(--nav-height);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>


================================================
FILE: usehooks.com/src/styles/globals.css
================================================
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

::selection {
  background-color: var(--pink);
  color: var(--coal);
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/fonts/outfit-v4-latin-regular.woff2") format("woff2");
}
/* outfit-500 - latin */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("/fonts/outfit-v4-latin-500.woff2") format("woff2");
}
/* outfit-700 - latin */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/fonts/outfit-v4-latin-700.woff2") format("woff2");
}
/* outfit-900 - latin */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 900;
  src: local(""), url("/fonts/outfit-v4-latin-900.woff2") format("woff2");
}

@font-face {
  font-family: "Paytone One";
  font-style: normal;
  font-weight: 400;
  src: local(""),
    url("/fonts/paytone-one-v16-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/fonts/firacode-regular.woff2") format("woff2");
}

:root {
  --gray-light: #1b1d23;
  --gray-dark: #131519;
  --gray-darkest: #0d0f11;
  --brand-coal: #0f0d0e;
  --brand-charcoal: #231f20;
  --brand-gray: #262522;
  --brand-yellow: #fcba28;
  --brand-pink: #f38ba3;
  --brand-green: #0ba95b;
  --brand-purple: #7b5ea7;
  --brand-beige: #f9f4da;
  --brand-blue: #12b5e5;
  --brand-orange: #fc7428;
  --brand-red: #ed203d;
  --brand-white: #ffffff;
  --gentlePeachLol: #f99157;
  --magesticPurple: #9d7dce;

  --red: var(--brand-red);
  --white: var(--brand-beige);
  --purple: var(--brand-purple);
  --black: var(--brand-coal);
  --blue: var(--brand-blue);
  --pink: var(--brand-pink);
  --gold: var(--brand-yellow);
  --aqua: var(--brand-blue);
  --gray: var(--brand-gray);
  --yellow: var(--brand-yellow);
  --green: var(--brand-green);
  --orange: var(--brand-orange);
  --charcoal: var(--brand-charcoal);
  --coal: var(--brand-coal);

  --border-dark: 0.12rem solid var(--charcoal);
  --border-dark-shadow: 0 0 0 0.1rem var(--charcoal);
  --border-light: 0.07rem solid rgba(249, 244, 218, 0.5);

  --body-padding: 2rem;
  --body-border: 1.3rem;

  --font-outfit: Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  --font-paytone: "Paytone One", Outfit, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;

  --font-lg: clamp(2rem, 8vw, 4rem);
  --font-md: clamp(1.6rem, 4vw, 2.1rem);
  --font-base: clamp(1.2rem, 2.5vw, 1.5rem);
  --font-sm: clamp(0.8rem, 2vw, 1rem);

  --focus-object: 0 0 0 0.2rem var(--blue), 0 0 0 0.27rem var(--white);
  --focus-text: 0 0 0 0.2rem var(--charcoal), 0 0 0 0.27rem var(--blue);

  --nav-height: 4rem;
}

html {
  font-size: 1em;
  scroll-behavior: smooth;
}

body {
  padding: var(--body-padding);
  background-color: var(--coal);
  border: var(--body-border) solid var(--charcoal);
  font-size: var(--font-base);
  font-family: var(--font-outfit);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  color: var(--white);
}

@media screen and (max-width: 700px) {
  :root {
    --body-padding: 1rem;
    --body-border: 0.7rem;
  }
}

:not(pre) > code {
  padding: .3rem .4rem;
  background-color: var(--brand-charcoal);
  border-radius: 3px;
  font-size: var(--font-sm);
  font-family: Fira Code;
  letter-spacing: -0.2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-paytone);
  text-transform: uppercase;
  line-height: 1.2;
}

h1 {
  font-size: var(--font-lg);
}

h2 {
  font-size: var(--font-md);
}

small {
  font-size: var(--font-sm);
}

img {
  height: auto;
  display: block;
}


a {
  transition: all 150ms ease-in-out;
}

p a {
  color: var(--yellow);
  text-decoration: underline;
}

p a:not(.logo):hover {
  background-color: var(--yellow);
  color: var(--coal);
}

a:focus-visible {
  outline: none;
}

a:not(.image):focus-visible {
  color: var(--coal);
  background-color: var(--yellow);
  box-shadow: var(--focus-text);
}

a.image:focus-visible {
  box-shadow: var(--focus-object);
}

button:focus-visible {
  outline: none;
  background-color: var(--yellow);
  color: var(--coal);
  box-shadow: var(--focus-object);
}

ul {
  list-style: none;
}

p + p {
  margin-top: 1.5em;
}


================================================
FILE: usehooks.com/tailwind.config.cjs
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {
      boxShadow: {
        sm: "var(--focus-object)",
      },
      colors: {
        brand: {
          coal: "#0f0d0e",
          gray: "#262522",
          charcoal: "#231F20",
          charcoalMuted: "#1B1918",
          orange: "#FC7428",
          yellow: "#FCBA28",
          pink: "#F38BA3",
          green: "#0BA95B",
          purple: "#7B5EA7",
          beige: "#F9F4DA",
          blue: "#12B5E5",
          red: "#ED203D",
          white: "#FFFFFF",
        },
      },
    },
  },
  plugins: [],
};


================================================
FILE: usehooks.com/theme.json
================================================
{
  "name": "uidotdev",
  "type": "dark",
  "semanticHighlighting": true,
  "semanticTokenColors": {
    "enumMember": {
      "foreground": "#12b5e5"
    },
    "variable.constant": {
      "foreground": "#fcba28"
    },
    "variable.defaultLibrary": {
      "foreground": "#12b5e5"
    }
  },
  "tokenColors": [
    {
      "name": "Text",
      "scope": "variable.parameter.function",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "js/ts punctuation separator key-value",
      "scope": "punctuation.separator.key-value",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "js/ts import keyword",
      "scope": "keyword.operator.expression.import",
      "settings": {
        "foreground": "#9d7dce"
      }
    },
    {
      "name": "math js/ts",
      "scope": "support.constant.math",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "math property js/ts",
      "scope": "support.constant.property.math",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    {
      "name": "js/ts variable.other.constant",
      "scope": "variable.other.constant",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "operator logical",
      "scope": "keyword.operator.logical",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "operator bitwise",
      "scope": "keyword.operator.bitwise",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "operator channel",
      "scope": "keyword.operator.channel",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "support.constant.property-value.scss",
      "scope": "support.constant.property-value.scss,support.constant.property-value.css",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    
    {
      "name": "js/ts module",
      "scope": "support.module.node,support.type.object.module,support.module.node",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "entity.name.type.module",
      "scope": "entity.name.type.module",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "js variable readwrite",
      "scope": "variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "js/ts json",
      "scope": "support.constant.json",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    {
      "name": "js/ts Keyword",
      "scope": [
        "keyword.operator.expression.instanceof",
        "keyword.operator.new",
        "keyword.operator.ternary",
        "keyword.operator.optional",
        "keyword.operator.expression.keyof"
      ],
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "js/ts console",
      "scope": "support.type.object.console",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "js/ts support.variable.property.process",
      "scope": "support.variable.property.process",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    {
      "name": "js console function",
      "scope": "entity.name.function,support.function.console",
      "settings": {
        "foreground": "#9d7dce"
      }
    },
    {
      "name": "operator",
      "scope": "keyword.operator.delete",
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "js dom",
      "scope": "support.type.object.dom",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "js dom variable",
      "scope": "support.variable.dom,support.variable.property.dom",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "keyword.operator",
      "scope": "keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Punctuation",
      "scope": "punctuation.separator.delimiter",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "Operators",
      "scope": "keyword.operator",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "Compound Assignment Operators",
      "scope": "keyword.operator.assignment.compound",
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "Compound Assignment Operators js/ts",
      "scope": "keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Keywords",
      "scope": "keyword",
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "Namespaces",
      "scope": "entity.name.namespace",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Variables",
      "scope": "variable",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "Language variables",
      "scope": "variable.language",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Packages",
      "scope": "token.package.keyword",
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "Packages",
      "scope": "token.package",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "Functions",
      "scope": [
        "entity.name.function",
        "meta.require",
        "support.function.any-method",
        "variable.function"
      ],
      "settings": {
        "foreground": "#9d7dce"
      }
    },
    {
      "name": "Classes",
      "scope": "entity.name.type.namespace",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Classes",
      "scope": "support.class, entity.name.type.class",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Class name",
      "scope": "entity.name.class.identifier.namespace.type",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Class name",
      "scope": [
        "entity.name.class",
        "variable.other.class.js",
        "variable.other.class.ts"
      ],
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Type Name",
      "scope": "entity.name.type",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Keyword Control",
      "scope": "keyword.control",
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "Control Elements",
      "scope": "control.elements, keyword.operator.less",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    {
      "name": "Methods",
      "scope": "keyword.other.special-method",
      "settings": {
        "foreground": "#9d7dce"
      }
    },
    {
      "name": "Storage",
      "scope": "storage",
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "Storage JS TS",
      "scope": "token.storage",
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void",
      "scope": "keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void",
      "settings": {
        "foreground": "#f38ba3"
      }
    },
    {
      "name": "Support",
      "scope": "support.function",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Support type",
      "scope": "support.type.property-name",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "Support type",
      "scope": "support.constant.property-value",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "Support type",
      "scope": "support.constant.font-name",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    {
      "name": "Meta tag",
      "scope": "meta.tag",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "Strings",
      "scope": "string",
      "settings": {
        "foreground": "#f99157"
      }
    },
    {
      "name": "Inherited Class",
      "scope": "entity.other.inherited-class",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Constant other symbol",
      "scope": "constant.other.symbol",
      "settings": {
        "foreground": "#12b5e5"
      }
    },
    {
      "name": "Integers",
      "scope": "constant.numeric",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    {
      "name": "Constants",
      "scope": "constant",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    {
      "name": "Tags",
      "scope": "entity.name.tag",
      "settings": {
        "foreground": "#f9f4da"
      }
    },
    {
      "name": "Attributes",
      "scope": "entity.other.attribute-name",
      "settings": {
        "foreground": "#fcba28"
      }
    },
    {
      "name": "Attribute IDs",
      "scope": "entity.other.attribute-name.id",
      "settings": {
        "fontStyle": "normal",
        "foreground": "#9d7dce"
      }
    },
    {
      "name": "js/ts italic",
      "scope": "entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super",
      "settings": {
        "fontStyle": "italic"
      }
    },
    {
      "name": "comment",
      "scope": "comment.line.double-slash,comment.block.documentation",
      "settings": {
        "fontStyle": "italic"
      }
    }
  ],
  "colors": {
    "foreground": "#f9f4da",
    "editor.background": "#231f20",
    "editor.foreground": "#f9f4da"
  }
}


================================================
FILE: usehooks.com/tsconfig.json
================================================
{
  "extends": "astro/tsconfigs/base",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "plugins": [
      {
        "name": "@astrojs/ts-plugin"
      },
    ]
  },
}

================================================
FILE: usehooks.com/vercel.json
================================================
{
  "trailingSlash": false,
  "rewrites": [
    {
      "source": "/stats/js/script.js",
      "destination": "https://plausible.io/js/script.js"
    },
    {
      "source": "/stats/api/event",
      "destination": "https://plausible.io/api/event"
    }
  ],
  "redirects": [
    {
      "source": "/useOnClickOutside",
      "destination": "/useclickaway"
    },
    {
      "source": "/useOnScreen",
      "destination": "/useintersectionobserver"
    },
    {
      "source": "/useWhyDidYouUpdate",
      "destination": "/userenderinfo"
    },
    {
      "source": "/useSize",
      "destination": "/usemeasure"
    },
    {
      "source": "/useDebounce",
      "destination": "/usedebounce"
    },
    {
      "source": "/useThrottle",
      "destination": "/usethrottle"
    },
    {
      "source": "/usePrevious",
      "destination": "/useprevious"
    },
    {
      "source": "/useEventListener",
      "destination": "/useeventlistener"
    },
    {
      "source": "/useLockBodyScroll",
      "destination": "/uselockbodyscroll"
    },
    {
      "source": "/useToggle",
      "destination": "/usetoggle"
    },
    {
      "source": "/useKeyPress",
      "destination": "/usekeypress"
    },
    {
      "source": "/useScript",
      "destination": "/usescript"
    },
    {
      "source": "/useMemoCompare",
      "destination": "/"
    },
    {
      "source": "/useMedia",
      "destination": "/usemediaquery"
    },
    {
      "source": "/useHistory",
      "destination": "/usehistorystate"
    },
    {
      "source": "/useWindowSize",
      "destination": "/usewindowsize"
    },
    {
      "source": "/useHover",
      "destination": "/usehover"
    },
    {
      "source": "/useLocalStorage",
      "destination": "/uselocalstorage"
    },
    {
      "source": "/useAnimation",
      "destination": "/"
    },
    {
      "source": "/useSpring",
      "destination": "/"
    },
    {
      "source": "/useAuth",
      "destination": "/"
    },
    {
      "source": "/useRequireAuth",
      "destination": "/"
    },
    {
      "source": "/useFirestoreQuery",
      "destination": "/"
    },
    {
      "source": "/useRouter",
      "destination": "/"
    },
    {
      "source": "/useMemo",
      "destination": "/"
    },
    {
      "source": "/useTheme",
      "destination": "/"
    },
    {
      "source": "/useDarkMode",
      "destination": "/"
    },
    {
      "source": "/useAsync",
      "destination": "/"
    }
  ]
}