useHooks

https://usehooks.com/
Admin
useHooks is a collection of modern, server-safe React hooks that provides reusable utilities for UI...
Tokens:42,526
Snippets:396
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Implement responsive UI with useMediaQuery

Source: https://usehooks.com/usemediaquery

This example demonstrates how to use the hook to conditionally render UI elements based on different viewport width breakpoints.

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

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

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

### Implement useCounter with min and max limits

Source: https://usehooks.com/usecounter

Demonstrates initializing the hook with a starting value and boundary options, and utilizing the returned control functions.

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

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

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

### useCounter(startingValue, options)

Source: https://usehooks.com/usecounter

Initializes a counter with an optional starting value and constraints.

```APIDOC
## useCounter(startingValue, options)

### Description
Manages a counter value with optional minimum and maximum limits. If the starting value is outside the specified limits, an error is thrown.

### Parameters
- **startingValue** (number) - Optional - The initial value for the counter. Default is 0.
- **options** (object) - Optional - Configuration object.
  - **min** (number) - Optional - The minimum value allowed.
  - **max** (number) - Optional - The maximum value allowed.

### Return Value
Returns an array containing:
- **[0]** (number) - The current value of the counter.
- **[1]** (object) - An object containing control functions:
  - **increment()** - Increments the counter by 1.
  - **decrement()** - Decrements the counter by 1.
  - **set(nextCount: number)** - Sets the counter to the specified value.
  - **reset()** - Resets the counter to the initial startingValue.

### Usage Example
```javascript
const [count, { increment, decrement, set, reset }] = useCounter(5, {
  min: 5,
  max: 10,
});
```
```

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

### Implement useDebounce for Search Input

Source: https://usehooks.com/usedebounce

This example demonstrates using useDebounce to delay search requests while a user types in an input field.

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

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

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

### Track window dimensions with useWindowSize

Source: https://usehooks.com/usewindowsize

This example demonstrates how to use the useWindowSize hook to display current window dimensions and adjust a component's style dynamically.

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

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

### Implement useKeyPress for arrow key detection

Source: https://usehooks.com/usekeypress

This example demonstrates how to use the hook to listen for arrow key presses and update the UI state accordingly.

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

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

### Implement useSessionStorage in a React component

Source: https://usehooks.com/usesessionstorage

This example demonstrates how to initialize and update a state value that persists in session storage.

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

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

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

### Implement a conditional interval timer with useIntervalWhen

Source: https://usehooks.com/useintervalwhen

This example demonstrates how to toggle an interval timer using a boolean state and the useIntervalWhen hook.

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

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

### Implement useIntersectionObserver for lazy loading

Source: https://usehooks.com/useintersectionobserver

This example demonstrates how to use the hook to conditionally render content only when the element enters the viewport.

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

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

### Display network state in a React component

Source: https://usehooks.com/usenetworkstate

This example demonstrates how to use the useNetworkState hook to retrieve and display current network connection properties in a table.

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

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

### Implementing useGeolocation in a React Component

Source: https://usehooks.com/usegeolocation

This example demonstrates how to integrate the useGeolocation hook to handle loading, error, and success states when accessing user location.

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

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

### Tracking mouse coordinates with useMouse

Source: https://usehooks.com/usemouse

This example demonstrates how to use the useMouse hook to track mouse position relative to an element and determine intersection status.

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

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

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

### Implement a modal with useClickAway

Source: https://usehooks.com/useclickaway

This example demonstrates how to attach the ref returned by useClickAway to a dialog element to automatically close it when a user clicks outside the modal area.

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

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

### Implement a Queue in React

Source: https://usehooks.com/usequeue

Demonstrates how to initialize a queue and use the add, remove, and clear methods to manipulate state.

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

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

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

### Basic useIdle implementation

Source: https://usehooks.com/useidle

Demonstrates tracking user inactivity with a 5-second threshold and updating the UI based on the idle state.

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

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

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

### Manage state objects with useObjectState

Source: https://usehooks.com/useobjectstate

Demonstrates initializing a state object and updating specific properties using the setStats function.

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

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

### Basic usage of useIsFirstRender

Source: https://usehooks.com/useisfirstrender

Demonstrates how to import and use the hook to track the initial render state within a React component.

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

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

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

### Basic usage of useFetch

Source: https://usehooks.com/usefetch

Demonstrates fetching data from an API and managing state updates based on user interaction.

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

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

### Implement useList in a React component

Source: https://usehooks.com/uselist

Demonstrates initializing a list and utilizing the provided methods to modify the state.

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

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

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

### Basic usage of useIsClient

Source: https://usehooks.com/useisclient

Demonstrates how to import and use the useIsClient hook within a React component to conditionally render content based on the environment.

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

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

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

### Implementing useLongPress in a React component

Source: https://usehooks.com/uselongpress

This example demonstrates how to use the useLongPress hook to trigger a modal after a 500ms press duration, including event handlers for lifecycle stages.

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

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

### Manage username availability with useSet

Source: https://usehooks.com/useset

Demonstrates initializing a set of usernames and using the add method to update the state based on form input.

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

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

### Implement undo/redo functionality with useHistoryState

Source: https://usehooks.com/usehistorystate

Demonstrates managing a list of items with undo, redo, and clear capabilities. Requires the @uidotdev/usehooks package.

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

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

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

### Implement useCopyToClipboard in a React component

Source: https://usehooks.com/usecopytoclipboard

Demonstrates how to use the hook to copy a generated hash to the clipboard and provide visual feedback.

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

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

### Track state changes with usePrevious

Source: https://usehooks.com/useprevious

Demonstrates using usePrevious to compare the current color state with its previous value.

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

```javascript
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>
  );
}
```
Tokens:
Raw