### Install Dependencies

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/README.md

Installs all the necessary dependencies for the project.

```bash
npm install
```

--------------------------------

### Start Local Development Server

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/README.md

Starts a local development server, typically accessible at localhost:3000.

```bash
npm run dev
```

--------------------------------

### Basic useFetch Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useFetch.mdx

Demonstrates how to use the useFetch hook to fetch data from a URL and display it, handling loading and error states. This example fetches Pokemon data based on a counter.

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

--------------------------------

### Basic useTimeout Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useTimeout.mdx

This example demonstrates how to use the useTimeout hook to trigger an action after a specified delay. The returned function can be used to clear the timeout.

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

--------------------------------

### Basic useHover Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useHover.mdx

Demonstrates how to use the useHover hook to track hover state and change background color accordingly. Attach the returned ref to the element you want to monitor.

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

--------------------------------

### Get Astro CLI Help

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/README.md

Displays help information for the Astro CLI.

```bash
npm run astro --help
```

--------------------------------

### Basic useIntervalWhen Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useIntervalWhen.mdx

This example demonstrates how to use useIntervalWhen to create a timer that increments a counter. The timer starts when the button is clicked and stops when clicked again. The 'startImmediately' option is set to true, so the timer begins as soon as the 'when' condition becomes true.

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

--------------------------------

### useInterval Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useInterval.mdx

This example demonstrates how to use the useInterval hook to change a background color every second. It also shows how to stop the interval using the returned clearInterval function.

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

--------------------------------

### React useQueue Hook Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useQueue.mdx

Demonstrates the usage of the useQueue hook to manage a queue of numbers. Includes buttons to add, remove, and clear elements, and displays the current queue state.

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

--------------------------------

### useMeasure Hook Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useMeasure.mdx

This example demonstrates how to use the useMeasure hook to track the width or height of an element. Attach the returned ref to the element you want to measure. The hook provides the dimensions in the rect object.

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

```

--------------------------------

### useClickAway Hook Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useClickAway.mdx

This example demonstrates how to use the useClickAway hook to close a modal when a user clicks outside of it. Attach the returned ref to the dialog element.

```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>
      )}
    </>
  );
}
```

--------------------------------

### Basic useCounter with Min/Max Limits

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useCounter.mdx

Demonstrates initializing useCounter with a starting value and defining minimum and maximum bounds. Includes buttons to increment, decrement, set to a specific value, and reset the counter, with the current count displayed.

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

--------------------------------

### Basic useIntersectionObserver Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useIntersectionObserver.mdx

Demonstrates how to use the useIntersectionObserver hook to conditionally render content when an element becomes visible in the viewport. It utilizes default parameters for threshold, root, and rootMargin.

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

--------------------------------

### useSet Hook Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useSet.mdx

Demonstrates how to use the useSet hook to manage a list of usernames, check for availability, and add new usernames. It includes form handling and conditional styling based on username availability.

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

--------------------------------

### React useHistoryState Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useHistoryState.mdx

Demonstrates how to use the useHistoryState hook to manage a list of items with undo, redo, and clear functionality. It includes functions to add and remove items from the state.

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

--------------------------------

### React useCopyToClipboard Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useCopyToClipboard.mdx

Demonstrates how to use the useCopyToClipboard hook in a React component to copy a generated API key. It shows how to conditionally render UI elements based on whether text has been copied.

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

--------------------------------

### Initialize and Use useList Hook

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useList.mdx

Demonstrates initializing the `useList` hook with a default array and using its returned methods to manipulate the list state. This example shows how to set, push, remove, insert, update, and clear list items.

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

--------------------------------

### useToggle Hook Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useToggle.mdx

Demonstrates how to use the useToggle hook to manage a boolean state and toggle it using a checkbox and buttons. The hook can be called with an initial value or without one.

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

--------------------------------

### Basic Countdown Timer with useCountdown

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useCountdown.mdx

This example demonstrates a basic countdown timer. It sets an end time and uses the hook to display the remaining seconds. Buttons are provided to add time to the countdown.

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

--------------------------------

### Basic Usage of useWindowScroll Hook

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useWindowScroll.mdx

Demonstrates how to use the useWindowScroll hook to display current scroll coordinates and scroll to specific positions. Includes examples of scrolling to absolute coordinates and using smooth scrolling.

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

--------------------------------

### Display Network State with useNetworkState

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useNetworkState.mdx

This example demonstrates how to use the useNetworkState hook to display various network status properties in a table. It requires importing React and the hook itself. This hook is intended for client-side use only.

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

--------------------------------

### React useDefault Hook Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useDefault.mdx

Demonstrates how to use the useDefault hook to manage state with a default value. It shows setting initial state, updating it, and how null values trigger the default.

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

--------------------------------

### Detecting Arrow Key Presses with useKeyPress

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useKeyPress.mdx

This example demonstrates how to use useKeyPress to detect presses of arrow keys and update the UI accordingly. It sets up listeners for 'ArrowRight', 'ArrowLeft', 'ArrowUp', and 'ArrowDown', triggering a callback to visually indicate the pressed key.

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

--------------------------------

### useSessionStorage Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useSessionStorage.mdx

Demonstrates how to use the useSessionStorage hook to manage a counter stored in session storage. It includes buttons to clear the cart, reload the window, and clear the entire session storage.

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

--------------------------------

### Track Previous Value with usePrevious

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/usePrevious.mdx

This example demonstrates how to use the usePrevious hook to store and display the previous value of a color state. It updates the color on button click and shows both the current and previous colors.

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

--------------------------------

### useLocalStorage Hook Example

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useLocalStorage.mdx

Demonstrates how to use the useLocalStorage hook to manage drawing data persisted in localStorage. It initializes the drawing state, sets up a canvas for drawing, and saves the drawing to localStorage using the provided save function.

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

--------------------------------

### Basic useOrientation Hook Usage

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useOrientation.mdx

Demonstrates how to use the useOrientation hook to get the current device orientation angle and type. It displays this information in a table and uses the orientation type to style an element.

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

--------------------------------

### Basic Usage of useRandomInterval

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useRandomInterval.mdx

This example demonstrates the basic usage of the useRandomInterval hook to add a 'heart' at random intervals. It requires React and the useRandomInterval hook. The returned 'clear' function can be used to stop the interval.

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

--------------------------------

### React Component Using useBattery

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useBattery.mdx

This example demonstrates how to use the useBattery hook in a React component to display battery information. It conditionally renders battery details or a loading message based on the hook's loading state.

```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>
    </>
  );
}
```

--------------------------------

### Use useLogger for Component Lifecycle Logging

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useLogger.mdx

This example demonstrates how to use the useLogger hook to log lifecycle events for child components. It logs the component name and its props on mount, update, and unmount. Check the browser console for output.

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

--------------------------------

### Track Browser Window Size with useWindowSize

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useWindowSize.mdx

Use this hook to get the current width and height of the browser window. The hook automatically updates these values when the window is resized. It's ideal for implementing responsive layouts or conditional rendering based on screen dimensions.

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

--------------------------------

### Basic Usage of useRenderCount Hook

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useRenderCount.mdx

Demonstrates how to use the useRenderCount hook to display the number of times a component has rendered. This example shows incrementing a state variable to trigger re-renders and observing the corresponding increase in the render count.

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

--------------------------------

### Preview Production Build

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/README.md

Locally previews the production build before deploying it.

```bash
npm run preview
```

--------------------------------

### Build for Production

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/README.md

Builds the project for production, outputting files to the ./dist/ directory.

```bash
npm run build
```

--------------------------------

### Get User's Preferred Language

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/usePreferredLanguage.mdx

Use this hook to get the user's preferred language. It's useful for internationalization and displaying content in the user's native language. The language is determined by browser settings.

```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{
```

```jsx
<time>{new Date(Date.now()).toLocaleDateString(language)}</time>
    </h2>
  </section>
);
}
```

--------------------------------

### Responsive UI with useMediaQuery

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useMediaQuery.mdx

Demonstrates how to use the useMediaQuery hook to conditionally apply styles or render components based on different screen sizes. Ensure the hook is imported from '@uidotdev/usehooks'.

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

--------------------------------

### Basic Usage of useEventListener

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useEventListener.mdx

This example demonstrates how to use useEventListener to close a modal when a click occurs outside of it. It attaches a 'mousedown' event listener to the document.

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

--------------------------------

### Update Favicon Dynamically with useFavicon

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useFavicon.mdx

Use the useFavicon hook to change the favicon based on component state. This example demonstrates updating the favicon when clicking buttons.

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

--------------------------------

### Project Structure

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/README.md

The project follows a standard Astro structure with components, layouts, and pages located in the src directory. Static assets are placed in the public directory.

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

--------------------------------

### Track Document Visibility with useVisibilityChange

Source: https://github.com/uidotdev/usehooks/blob/main/usehooks.com/src/content/hooks/useVisibilityChange.mdx

Use this hook to get a boolean indicating if the document is visible. It's useful for triggering actions when a user navigates away from or back to a tab.

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