Reactuse

https://github.com/childrentime/reactuse
Admin
Reactuse is a collection of essential React Hooks Utilities, providing a set of reusable hooks to...
Tokens:452,826
Snippets:3,075
Trust Score:9.4
License:Unlicense
Update:1 month ago
Show doc for...
Tokens:
Raw
### useMap live demo with set, get, remove, has, clear, reset

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/state/useMap.mdx

Live example demonstrating useMap with an initial array of key-value pairs. Shows how to set, update, remove, clear, and reset entries, and how to read size, check keys with has, and retrieve values with get. Mutations trigger re-renders automatically.

```tsx
function Demo() {
  const { map, set, get, remove, has, clear, reset, size } = useMap([
    ['react', '18.0.0'],
    ['vue', '3.0.0'],
  ]);

  return (
    <div>
      <p>Map size: {size}</p>
      <div style={{ marginBottom: 16 }}>
        <button
          type="button"
          onClick={() => set('angular', '16.0.0')}
          style={{ marginRight: 8 }}
        >
          Add Angular
        </button>
        <button
          type="button"
          onClick={() => set('react', '18.2.0')}
          style={{ marginRight: 8 }}
        >
          Update React
        </button>
        <button
          type="button"
          onClick={() => remove('vue')}
          style={{ marginRight: 8 }}
        >
          Remove Vue
        </button>
        <button
          type="button"
          onClick={clear}
          style={{ marginRight: 8 }}
        >
          Clear All
        </button>
        <button
          type="button"
          onClick={reset}
          style={{ marginRight: 8 }}
        >
          Reset
        </button>
      </div>
      <div>
        <p>Current entries:</p>
        <ul>
          {Array.from(map.entries()).map(([key, value]) => (
            <li key={key}>
              {key}: {value} 
              {has(key) && ' ✓'}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <p>Get React version: {get('react') || 'Not found'}</p>
      </div>
    </div>
  );
};
```

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

### Setup Express SSE server with client tracking and endpoints

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/public/llms-full.txt

Sets up an Express server for SSE with channel-based client management. Includes endpoints for GET /events (SSE stream), POST /broadcast (send messages to clients), and GET /status (view client counts per channel). Handles connection cleanup on client disconnect.

```javascript
const channelClients = clients.get(channel);
      if (channelClients) {
        channelClients.delete(res);
        if (channelClients.size === 0) {
          clients.delete(channel);
        }
      }

      const remainingClients = Array.from(clients.values())
        .reduce((sum, set) => sum + set.size, 0);
      console.log(`Client disconnected from channel ${channel}. Total clients: ${remainingClients}`);

      try {
        res.end();
      } catch (error) {
        console.error('Error ending response:', error);
      }
    };

    // 12. Set up connection close handling
    req.on('close', cleanup);
    req.on('end', cleanup);
    res.on('close', cleanup);
    res.on('error', cleanup);

  } catch (error) {
    console.error(`Error in SSE connection for channel ${channel}:`, error);
    res.end();
  }
});
```

```javascript
// GET SSE endpoint handler
function handleGETConnection(req, res, channel = 'default', interval = 3000) {
  // Set SSE headers
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'X-Accel-Buffering': 'no',
    'Access-Control-Allow-Origin': 'http://localhost:3000',
    'Access-Control-Allow-Credentials': 'true'
  });

  console.log(`New client connected to channel: ${channel}`);

  // Send connection success message
  const sendEvent = (data, eventType = null) => {
    if (eventType) {
      res.write(`event: ${eventType}\n`);
    }
    res.write(`id: ${Date.now()}\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // Send initial connection message
  sendEvent({
    message: 'Connected to SSE stream',
    channel: channel,
    time: new Date().toISOString()
  }, 'connected');

  // Add connection to the client collection of corresponding channel
  if (!clients.has(channel)) {
    clients.set(channel, new Set());
  }
  clients.get(channel).add(res);

  const totalClients = Array.from(clients.values())
    .reduce((sum, set) => sum + set.size, 0);
  console.log(`Client connected to channel ${channel}. Total clients: ${totalClients}`);

  // Send periodic messages
  let messageCounter = 0;
  const intervalId = setInterval(() => {
    messageCounter++;
    messageCount++;
    sendEvent({
      id: messageCount,
      count: messageCounter,
      channel: channel,
      time: new Date().toISOString(),
      message: `Channel ${channel} message ${messageCounter}`
    });
  }, interval);

  // Heartbeat check
  const heartbeatId = setInterval(() => {
    res.write(':\n\n');
  }, 15000);

  // Cleanup function
  const cleanup = () => {
    clearInterval(intervalId);
    clearInterval(heartbeatId);
    const channelClients = clients.get(channel);
    if (channelClients) {
      channelClients.delete(res);
      if (channelClients.size === 0) {
        clients.delete(channel);
      }
    }
    const remainingClients = Array.from(clients.values())
      .reduce((sum, set) => sum + set.size, 0);
    console.log(`Client disconnected from channel ${channel}. Total clients: ${remainingClients}`);
    try {
      res.end();
    } catch (error) {
      console.error('Error ending response:', error);
    }
  };

  // Monitor connection closure
  req.on('close', cleanup);
  res.on('close', cleanup);
  res.on('error', cleanup);
}
```

```javascript
// GET SSE endpoint
app.get('/events', (req, res) => {
  const channel = req.query.channel || 'default';
  const interval = parseInt(req.query.interval) || 3000;
  handleGETConnection(req, res, channel, interval);
});
```

```javascript
// Broadcast message endpoint
app.post('/broadcast', bodyParser.json(), (req, res) => {
  const { message, channel, eventType = 'broadcast' } = req.body;

  let targetClients = new Set();
  if (channel) {
    targetClients = clients.get(channel) || new Set();
    console.log(`Broadcasting message to channel ${channel} (${targetClients.size} clients):`, message);
  } else {
    targetClients = new Set(
      Array.from(clients.values())
        .flatMap(channelClients => Array.from(channelClients))
    );
    console.log(`Broadcasting message to all channels (${targetClients.size} clients):`, message);
  }

  let successCount = 0;
  for (const client of targetClients) {
    try {
      client.write(`event: ${eventType}\n`);
      client.write(`id: ${Date.now()}\n`);
      client.write(`data: ${JSON.stringify({
        message,
        channel: channel || 'all',
        time: new Date().toISOString()
      })}\n\n`);
      successCount++;
    } catch (error) {
      console.error('Error broadcasting to client:', error);
    }
  }

  res.json({
    success: true,
    clientCount: targetClients.size,
    successfulBroadcasts: successCount,
    channel: channel || 'all',
    message: 'Broadcast sent successfully'
  });
});
```

```javascript
// Status endpoint
app.get('/status', (req, res) => {
  const channelStats = {};
  clients.forEach((clientSet, channel) => {
    channelStats[channel] = clientSet.size;
  });
```

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

### useEventListener quick start example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-08-20-react-useeventlistener-hook.md

Shows a Modal component that closes on Escape keydown. The listener attaches to window automatically; no cleanup or dependency array is needed.

```tsx
import { useEventListener } from "@reactuses/core";

function Modal({ onClose }: { onClose: () => void }) {
  useEventListener("keydown", (e) => {
    if (e.key === "Escape") onClose();
  });

  return <div role="dialog">…</div>;
}
```

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

### Install and import useClipboard

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-11-react-copy-to-clipboard.md

Install the @reactuses/core package and import the useClipboard hook. The installation command is run in the terminal, and the import statement is added to the component file.

```bash
npm i @reactuses/core
```

```tsx
import { useClipboard } from "@reactuses/core";
```

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

### Install ReactUse with pnpm and yarn

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-13-react-browser-api-hooks.md

Alternative installation commands using pnpm and yarn.

```bash
pnpm add @reactuses/core
```

```bash
yarn add @reactuses/core
```

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

### Express SSE server setup with endpoints

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/public/llms-full.txt

Server-side setup for SSE including a status endpoint, error handling middleware, and server startup. Lists available endpoints: GET /events, POST /events, POST /broadcast, GET /status.

```javascript
  res.json({
    activeConnections: Array.from(clients.values())
      .reduce((sum, set) => sum + set.size, 0),
    channelStats,
    messageCount,
    uptime: process.uptime()
  });
});

// Error handling middleware
app.use((err, req, res, next) => {
  console.error('Server error:', err);
  res.status(500).json({
    error: 'Internal Server Error',
    message: err.message
  });
});

// Start server
app.listen(PORT, () => {
  console.log(`SSE Server running at http://localhost:${PORT}`);
  console.log('Available endpoints:');
  console.log(`- GET  /events?channel={channel}&interval={interval} - SSE stream`);
  console.log(`- POST /events - SSE stream with body params`);
  console.log(`- POST /broadcast - Broadcast message to all clients or specific channel`);
  console.log(`- GET  /status - Server status`);
});
```

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

### Install @reactuses/core with yarn

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-11-react-dark-mode-toggle.md

Install the ReactUse core package using yarn.

```bash
yarn add @reactuses/core
```

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

### useMount live example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/effect/useMount.mdx

A live example showing useMount setting state after mount. The callback receives no arguments and does not support cleanup. In development mode, a console error is logged if the argument is not a function.

```tsx
function Demo() {
  const [value, setValue] = useState("UnMounted");
  useMount(() => {
    setValue("Mounted");
  });
  return <div>{value}</div>;
};
```

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

### Install qrcode library

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/integrations/useQRCode.mdx

Install the required external dependency qrcode@^1. The hook will not work without it.

```shell
npm i qrcode@^1
```

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

### useRafFn live demo with stop/start controls

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/effect/useRafFn.mdx

A live example showing how to use useRafFn to count ticks and display the last high-resolution timestamp. The loop starts automatically on mount; clicking the button toggles between stop and start, and calls useUpdate to re-render.

```tsx
function Demo() {
  const [ticks, setTicks] = useState(0);
  const [lastCall, setLastCall] = useState(0);
  const update = useUpdate();

  const [loopStop, loopStart, isActive] = useRafFn((time) => {
    setTicks(ticks => ticks + 1);
    setLastCall(time);
  });

  return (
    <div>
      <div>RAF triggered: {ticks} (times)</div>
      <div>Last high res timestamp: {lastCall}</div>
      <br />
      <button
        onClick={() => {
          isActive() ? loopStop() : loopStart();
          update();
        }}
      >
        {isActive() ? "STOP" : "START"}
      </button>
    </div>
  );
};
```

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

### Install @reactuses/core with pnpm or yarn

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-11-react-window-size-hook.md

Install the @reactuses/core package using pnpm or yarn. The pnpm command is shown with a comment for the yarn alternative.

```bash
pnpm add @reactuses/core
# or
yarn add @reactuses/core
```

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

### Install @reactuses/core with npm, yarn, or pnpm

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/index.md

Install the @reactuses/core package using your preferred package manager. The commands are shown for npm, yarn, and pnpm.

```shell
# npm
npm i @reactuses/core

# yarn
yarn add @reactuses/core

# pnpm
pnpm add @reactuses/core
```

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

### usePlatform basic usage in a live demo

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/usePlatform.mdx

A live example showing how to use the usePlatform hook to get the current platform and render it in a paragraph. The hook returns an object with a platform property that can be 'ios', 'android', or 'unknown'.

```tsx
function Demo() {
  const {platform} = usePlatform();

  return <p>platfrom: {platform}</p>;
};
```

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

### Install @reactuses/core

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-08-20-react-useeventlistener-hook.md

Install the @reactuses/core package via npm. This library contains useEventListener and other SSR-safe, TypeScript-first hooks.

```bash
npm install @reactuses/core

```

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

### Basic useCycleList example with live demo

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/state/useCycleList.mdx

Shows a live interactive demo of cycling through a list of animal names. The hook returns a tuple of [currentItem, next, prev]; calling next() and prev() moves through the list and wraps around. The example uses buttons to trigger next and prev functions and displays the current item.

```tsx
function Demo() {
  const [state, next, prev] = useCycleList([
    "Dog",
    "Cat",
    "Lizard",
    "Shark",
    "Whale",
    "Dolphin",
    "Octopus",
    "Seal",
  ]);

  return (
    <div>
      <div>{state}</div>
      <div>
        <button onClick={() => next()}>next</button>
        <button onClick={() => prev()}>prev</button>
      </div>
    </div>
  );
};
```

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

### useObjectUrl live example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useObjectUrl.mdx

A live example showing how to use useObjectUrl to preview a selected file. It uses useState to store the selected file and passes it to useObjectUrl, displaying the resulting object URL.

```tsx
function Demo() {
  const [file, setFile] = useState<File>();
  const url = useObjectUrl(file);

  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const target = e.target;
    const files = target.files;
    setFile(files && files.length > 0 ? files[0] : undefined);
  };
  return (
    <div>
      <p>Select File</p>
      <input type="file" onChange={onFileChange} />
      <p>Object Url</p>
      <div>{url}</div>
    </div>
  );
};
```

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

### Install ReactUse with npm

Source: https://github.com/childrentime/reactuse/blob/main/README.md

Install the @reactuses/core package using npm. Required before using any ReactUse hooks.

```bash
npm i @reactuses/core
```

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

### Install and import ReactUse hooks

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-31-react-geolocation-device-apis.md

Install the @reactuses/core package and import the five SSR-safe hooks (useGeolocation, usePermission, useNetwork, useOnline, usePlatform) for use in any SSR framework.

```bash
npm install @reactuses/core
```

```tsx
import {
  useGeolocation,
  usePermission,
  useNetwork,
  useOnline,
  usePlatform,
} from "@reactuses/core";
```

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

### Install ts-document

Source: https://github.com/childrentime/reactuse/blob/main/packages/ts-document/README.md

Install the package as a dev dependency.

```bash
npm i ts-document -D
```

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

### Install and import useLocalStorage

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-11-react-localstorage-hook.md

Install the @reactuses/core package and import the useLocalStorage hook. The import statement is required to use the hook in your React components.

```bash
npm i @reactuses/core
```

```tsx
import { useLocalStorage } from "@reactuses/core";
```

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

### Basic usage of useSpeechRecognition hook

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/public/llms-full.txt

Live example showing a basic implementation of the useSpeechRecognition hook, including start, stop, and toggle controls. It checks browser support and displays status, result, final flag, and error.

```tsx
```tsx live
function Demo() {
  const {
    isSupported,
    isListening,
    isFinal,
    result,
    error,
    start,
    stop,
    toggle,
  } = useSpeechRecognition();

  if (!isSupported) {
    return <div>Speech recognition is not supported in this browser</div>;
  }

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <p><strong>Status:</strong> {isListening ? 'Listening...' : 'Stopped'}</p>
        <p><strong>Result:</strong> {result || 'No speech detected'}</p>
        <p><strong>Final:</strong> {isFinal ? 'Yes' : 'No'}</p>
        {error && <p style={{ color: 'var(--ifm-color-danger)' }}><strong>Error:</strong> {error.error}</p>}
      </div>
      
      <div style={{ display: 'flex', gap: '10px' }}>
        <button onClick={start} disabled={isListening}>
          Start
        </button>
        <button onClick={stop} disabled={!isListening}>
          Stop
        </button>
        <button onClick={() => toggle()}>
          Toggle
        </button>
      </div>
    </div>
  );
}
```
```

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

### useEventSource demo with immediate: false and open/close controls

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/public/llms-full.txt

A live TSX example demonstrating the useEventSource hook. It connects to the https://sse.dev/test endpoint with immediate disabled, so the connection does not start automatically; the user must click the 'open' button to start. The component displays the current status, stringified data, and error, and provides buttons to open and close the connection. Suitable for real-time updates such as live feeds or dashboards.

```tsx
function Demo() {
  const { status, data, error, close, open } = useEventSource(
    "https://sse.dev/test",
    [],
    {
      immediate: false,
    }
  );

  return (
    <div>
      <div>Status: {status}</div>
      <div>Data: {JSON.stringify(data)}</div>
      <div>Error: {error}</div>
      <button onClick={open}>open</button>
      <button onClick={close}>Close</button>
    </div>
  );
};
```

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

### Basic usage of useObjectUrl

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-07-10-react-useobjecturl-hook.md

Example showing how to use the useObjectUrl hook to display a preview of a File object.

```tsx
import { useObjectUrl } from '@reactuses/core';

function FilePreview({ file }: { file?: File }) {
  const url = useObjectUrl(file);
  return url ? <img src={url} /> : null;
}
```

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

### useDevicePixelRatio live demo

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useDevicePixelRatio.mdx

A live example showing the useDevicePixelRatio hook in a React component. It returns an object with a pixelRatio property that updates reactively when the display density changes. The example renders the current device pixel ratio in a paragraph.

```tsx
function Demo() {
  const { pixelRatio } = useDevicePixelRatio();

  return <p>Device pixel ratio: {pixelRatio}</p>;
};
```

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

### useReducedMotion usage example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useReducedMotion.mdx

A live example demonstrating the useReducedMotion hook. It initializes with a default state of false and displays the current motion preference as a JSON string.

```tsx
function Demo() {
  const motion = useReducedMotion(false);

  return <div>ReducedMotion: {JSON.stringify(motion)}</div>;
};

```

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

### useIdle basic usage with live example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useIdle.mdx

Use this hook to detect user inactivity. The example sets a 3-second timeout and displays whether the user is idle. The hook returns a boolean and is SSR-safe, returning the initial state (default false) on the server.

```tsx
function Demo() {
  const isIdle = useIdle(3e3);

  return (
    <div>
      <div>User is idle: {isIdle ? "Yes 😴" : "Nope"}</div>
    </div>
  );
};
```

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

### useWindowSize in Next.js

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-11-ssr-safe-react-hooks.md

Example of using useWindowSize. Returns { width: 0, height: 0 } on the server via getServerSnapshot.

```tsx
import { useWindowSize } from "@reactuses/core";

export default function Dashboard() {
  // Returns { width: 0, height: 0 } on the server via getServerSnapshot
  const { width, height } = useWindowSize();

  return (
    <p>
      Viewport: {width} x {height}
    </p>
  );
}
```

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

### useMediaQuery in Next.js

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-11-ssr-safe-react-hooks.md

Example of using useMediaQuery with a defaultState to prevent hydration mismatch.

```tsx
import { useMediaQuery } from "@reactuses/core";

export default function Layout({ children }) {
  // Pass a defaultState to prevent hydration mismatch
  const isMobile = useMediaQuery("(max-width: 768px)", false);

  return (
    <div>
      {isMobile ? <MobileNav /> : <DesktopNav />}
      {children}
    </div>
  );
}
```

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

### useFileDialog basic usage with open and reset

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useFileDialog.mdx

Live example showing how to use useFileDialog to open the file picker, display selected file names, and reset the selection. The hook returns a tuple: files (FileList or null), open, and reset. The open function is called on button click, and reset clears the selection. The example is marked as live and uses JSX.

```tsx
function Demo() {
  const [files, open, reset] = useFileDialog();

  return (
    <div>
      <button onClick={() => open()}> Choose files</button>
      <button
        style={{ marginLeft: 20 }}
        disabled={!files}
        onClick={() => {
          reset();
        }}
      >
        Reset
      </button>
      {files && (
        <div>
          <p>
            You have selected: <b>{files.length} files</b>
            {Array.from(files).map((file) => {
              return <li key={file.name}>{file.name}</li>;
            })}
          </p>
        </div>
      )}
    </div>
  );
};
```

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

### useScroll with element ref and live display

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useScroll.mdx

Live example demonstrating useScroll on a scrollable div. It destructures the returned tuple into x, y, isScrolling, arrivedState, and directions, then displays position, edge arrival, and scroll direction values. The example uses useMemo to stabilize the arrivedState and directions objects for rendering.

```tsx
function Demo() {
  const elementRef = useRef<HTMLDivElement>(null);
  const [x, y, isScrolling, arrivedState, directions] = useScroll(elementRef);
  const { left, right, top, bottom } = useMemo(
    () => arrivedState,
    [arrivedState],
  );
  const {
    left: toLeft,
    right: toRight,
    top: toTop,
    bottom: toBottom,
  } = useMemo(() => directions, [directions]);

  const absoluteStyle: CSSProperties = {
    paddingTop: "0.25rem",
    paddingBottom: "0.25rem",
    paddingLeft: "0.5rem",
    paddingRight: "0.5rem",
    position: "absolute",
  };
  return (
    <div style={{ display: "flex" }}>
      <div
        ref={elementRef}
        style={{
          width: 300,
          height: 300,
          margin: "auto",
          borderRadius: "0.25rem",
          overflow: "scroll",
        }}
      >
        <div style={{ width: 500, height: 400, position: "relative" }}>
          <div
            style={{
              ...absoluteStyle,
              top: "0rem",
              left: "0rem",
            }}
          >
            TopLeft
          </div>
          <div
            style={{
              ...absoluteStyle,
              bottom: "0rem",
              left: "0rem",
            }}
          >
            BottomLeft
          </div>
          <div
            style={{
              ...absoluteStyle,
              top: "0rem",
              right: "0rem",
            }}
          >
            TopRight
          </div>
          <div
            style={{
              ...absoluteStyle,
              bottom: "0rem",
              right: "0rem",
            }}
          >
            BottomRight
          </div>
          <div
            style={{
              ...absoluteStyle,
              top: "33.33333%",
              left: "33.33333%",
            }}
          >
            Scroll Me
          </div>
        </div>
      </div>
      <div
        style={{
          width: 280,
          margin: "auto",
          paddingLeft: "1rem",
          display: "flex",
          flexDirection: "column",
          gap: 5,
        }}
      >
        <div>
          Position: {x.toFixed(1)}, {y.toFixed(1)}
        </div>
        <div>isScrolling: {JSON.stringify(isScrolling)}</div>
        <div>Top Arrived: {JSON.stringify(top)}</div>
        <div>Right Arrived: {JSON.stringify(right)}</div>
        <div>Bottom Arrived: {JSON.stringify(bottom)}</div>
        <div>Left Arrived: {JSON.stringify(left)}</div>
        <div>Scrolling Up: {JSON.stringify(toTop)}</div>
        <div>Scrolling Right: {JSON.stringify(toRight)}</div>
        <div>Scrolling Down: {JSON.stringify(toBottom)}</div>
        <div>Scrolling Left: {JSON.stringify(toLeft)}</div>
      </div>
    </div>
  );
};
```

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

### Dynamic language and mode switching with useSpeechRecognition

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useSpeechRecognition.mdx

Live demo component that uses the useSpeechRecognition hook to provide quick start buttons for different language/mode combinations (e.g., 'en-US' continuous, 'zh-CN' single). Shows how to start recognition with language and continuous options, stop listening, display the recognized result, and handle isSupported false with a fallback message.

```tsx
function DynamicOptionsDemo() {
  const {
    isSupported,
    isListening,
    result,
    start,
    stop,
  } = useSpeechRecognition();

  const quickOptions = [
    { 
      language: 'en-US', 
      name: 'English (Continuous)', 
      flag: '🇺🇸', 
      continuous: true,
      color: 'var(--ifm-color-primary)'
    },
    { 
      language: 'en-US', 
      name: 'English (Single)', 
      flag: '🇺🇸', 
      continuous: false,
      color: 'var(--ifm-color-secondary)'
    },
    { 
      language: 'zh-CN', 
      name: '中文 (连续)', 
      flag: '🇨🇳', 
      continuous: true,
      color: 'var(--ifm-color-success)'
    },
    { 
      language: 'zh-CN', 
      name: '中文 (单次)', 
      flag: '🇨🇳', 
      continuous: false,
      color: 'var(--ifm-color-warning)'
    },
  ];

  if (!isSupported) {
    return <div>Speech recognition is not supported</div>;
  }

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <p><strong>Quick Start with Different Languages and Modes:</strong></p>
        <div style={{ 
          display: 'grid', 
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: '10px',
          marginBottom: '16px'
        }}>
          {quickOptions.map((option, index) => (
            <button
              key={index}
              onClick={() => start({ lang: option.language, continuous: option.continuous })}
              disabled={isListening}
              style={{
                padding: '12px 8px',
                border: '1px solid var(--ifm-color-emphasis-300)',
                backgroundColor: isListening ? 'var(--ifm-color-emphasis-300)' : option.color,
                color: 'var(--ifm-color-white)',
                borderRadius: '6px',
                cursor: isListening ? 'not-allowed' : 'pointer',
                fontSize: '13px',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: '4px',
                textAlign: 'center'
              }}
            >
              <span style={{ fontSize: '18px' }}>{option.flag}</span>
              <span>{option.name}</span>
            </button>
          ))}
        </div>
        
        {isListening && (
          <button
            onClick={stop}
            style={{
              padding: '8px 16px',
              border: 'none',
              backgroundColor: 'var(--ifm-color-danger)',
              color: 'var(--ifm-color-white)',
              borderRadius: '4px',
              cursor: 'pointer',
              width: '100%'
            }}
          >
            Stop Listening
          </button>
        )}
      </div>
      
      <div style={{ 
        padding: '16px', 
        border: '1px solid var(--ifm-color-emphasis-200)', 
        borderRadius: '6px',
        minHeight: '80px',
        backgroundColor: 'var(--ifm-background-surface-color)',
        color: 'var(--ifm-color-content)'
      }}>
        <strong>Result:</strong> {result || 'Click any button to start speaking...'}
      </div>
      
      <div style={{ 
        marginTop: '12px',
        padding: '12px',
        backgroundColor: 'var(--ifm-background-surface-color)',
        borderRadius: '4px',
        fontSize: '14px',
        color: 'var(--ifm-color-content-secondary)'
      }}>
        <strong>Tip:</strong> Continuous mode keeps listening until you stop it, 
        while single mode stops after detecting one phrase.
      </div>
    </div>
  );
}
```

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

### useMount Usage

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/public/llms-full.txt

A code snippet showing the import of useMount from '@reactuses/core'. This is the only code shown for useMount, but the rest of the example is not visible. The hook runs a callback exactly once after mount.

```tsx
import { useMount } from '@reactuses/core'
```

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

### usePreferredDark usage example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/usePreferredDark.mdx

Live example showing how to use the usePreferredDark hook to get a boolean indicating dark mode preference. The hook accepts a defaultState parameter (default: false) for SSR safety, and the value updates automatically when the user toggles system dark mode.

```tsx
function Demo() {
  const isDark = usePreferredDark(false);

  return <div>PreferredDark: {JSON.stringify(isDark)}</div>;
};
```

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

### useWindowSize live demo

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/element/useWindowSize.mdx

Live example demonstrating the useWindowSize hook. It destructures width and height from the hook's return value and renders them in a paragraph. The values update automatically on window resize.

```tsx
function Demo() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>
        width: {width}, height: {height}
      </p>
    </div>
  );
};
```

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

### useElementSize hook example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-07-21-react-useresizeobserver-hook.md

Returns width and height as a tuple, starting at [0, 0] until the first measurement. Respects the same `box` option and correctly sums fragmented boxes via `borderBoxSize`/`contentBoxSize`.

```tsx
import { useElementSize } from '@reactuses/core';

function Card() {
  const ref = useRef<HTMLDivElement>(null);
  const [width, height] = useElementSize(ref);

  return (
    <div ref={ref}>
      {width}px × {height}px
    </div>
  );
}
```

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

### useInterval basic countdown example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/public/llms-full.txt

Increments a count state every second using useInterval. The callback references the latest count via closure.

```tsx
function Demo() {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  return <div>count: {count}</div>;
};
```

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

### useQRCode live demo

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/integrations/useQRCode.mdx

A live example showing how to use the useQRCode hook. It takes a text input and displays the generated QR code image or an error message. The hook regenerates the QR code reactively as the input changes.

```tsx
// import { useQRCode } from "@reactuses/core/useQRCode";

function Demo() {
  const [text, setText] = useState("https://reactuse.com/");
  const { qrCode, error } = useQRCode(text);

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter text to generate QR code"
      />
      <br />
      <br />
      {error && <div style={{ color: "red" }}>{error}</div>}
      {qrCode && <img src={qrCode} alt="QR Code" />}
    </div>
  );
};
```

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

### useToggle quick start example

Source: https://github.com/childrentime/reactuse/blob/main/README.md

A React component demonstrating the useToggle hook, which toggles a boolean state. The button displays 'ON' or 'OFF' based on the state, and clicking it calls the toggle function.

```tsx
import { useToggle } from "@reactuses/core";

const Demo = () => {
  const [on, toggle] = useToggle(true);
  return <button onClick={toggle}>{on ? "ON" : "OFF"}</button>;
};
```

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

### useScreenSafeArea live demo

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useScreenSafeArea.mdx

A live example showing how to use the useScreenSafeArea hook to get and display the top, right, bottom, and left safe area insets. The hook returns a tuple of four strings.

```tsx
function Demo() {
  const [top, right, bottom, left] = useScreenSafeArea();
  return (
    <div>
      <div>
        top: <>{top}</>
      </div>
      <div>
        bottom: <>{bottom}</>
      </div>
      <div>
        left: <>{left}</>
      </div>
      <div>
        right: <>{right}</>
      </div>
    </div>
  );
};
```

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

### useLatest usage example in Editor component

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-08-16-react-uselatest-hook.md

Shows how to use useLatest to read the current value from a callback after an async operation. The closure captures the value at call time; the ref gets the latest value.

```tsx
import { useLatest } from "@reactuses/core";
import { useState } from "react";

function Editor({ docId }: { docId: string }) {
  const [text, setText] = useState("");
  const [status, setStatus] = useState<"idle" | "saving" | "saved" | "dirty">("idle");
  const latestText = useLatest(text);

  async function save() {
    const snapshot = text; // the closure: what we're sending
    setStatus("saving");
    await api.save(docId, snapshot);
    // the ref: what the user has NOW
    setStatus(latestText.current === snapshot ? "saved" : "dirty");
  }

  // …
}
```

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

### useFullscreen with enterFullscreen, exitFullscreen, toggleFullscreen

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useFullscreen.mdx

Live example showing how to use useFullscreen with a ref to control fullscreen mode. It displays the current state and provides buttons to enter, exit, and toggle fullscreen. Note that browsers require a user gesture (like a click) to enter fullscreen.

```tsx
function Demo() {
  const ref = useRef(null);
  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }]
    = useFullscreen(ref);
  return (
    <div ref={ref}>
      <div style={{ marginBottom: 16 }}>
        {isFullscreen ? "Fullscreen" : "Not fullscreen"}
      </div>
      <div>
        <button type="button" onClick={enterFullscreen}>
          enterFullscreen
        </button>
        <button
          type="button"
          onClick={exitFullscreen}
          style={{ margin: "0 8px" }}
        >
          exitFullscreen
        </button>
        <button type="button" onClick={toggleFullscreen}>
          toggleFullscreen
        </button>
      </div>
    </div>
  );
};
```

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

### useTextDirection hook to toggle text direction (tsx live)

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/public/llms-full.txt

Live example showing how to use useTextDirection with a selector to target a specific element. It returns a tuple [dir, setDir] and toggles between 'ltr' and 'rtl' on button click. SSR-safe: returns initialValue 'ltr' on server.

```tsx
function Demo() {
  const [dir, setDir] = useTextDirection({
    selector: "#_useTextDirectionDemo",
  });

  const text = useMemo(
    () =>
      dir === "ltr"
        ? "This paragraph is in English and correctly goes left to right."
        : "This paragraph is in English but incorrectly goes right to left.",
    [dir],
  );

  const handleOnClick = () => {
    const value = dir === "rtl" ? "ltr" : "rtl";
    setDir(value);
  };

  return (
    <div id="_useTextDirectionDemo">
      <p>{text}</p>
      <button onClick={handleOnClick}>
        <span>{dir.toUpperCase()}</span>
      </button>
      <span>Click to change the direction</span>
    </div>
  );
};

render(<Demo/>);
```

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

### Demo of useOnceEffect vs useEffect in React 18 Strict Mode

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/public/llms-full.txt

Live example comparing useOnceEffect and useEffect. It uses useState to count invocations and shows that useOnceEffect increments once, while useEffect may increment twice in React 18 Strict Mode.

```tsx
function Demo() {
  const [effect, setEffect] = useState(0);
  const [onceEffect, setOnceEffect] = useState(0);

  useOnceEffect(() => {
    setOnceEffect(onceEffect => onceEffect + 1);
  }, []);

  useEffect(() => {
    setEffect(effect => effect + 1);
  }, []);

  return (
    <div>
      <div>onceEffect: {onceEffect}</div>
      <br />
      <div>effect: {effect}</div>
    </div>
  );
};

```

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

### useMeasure: Tooltip positioning with contentRect

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-05-13-react-observer-hooks.md

Use useMeasure to get the full ResizeObserverEntry.contentRect (width, height, top, left) plus a ref to attach. This example positions a tooltip at the button's center-top coordinates.

```tsx
import { useMeasure } from "@reactuses/core";

function TooltipAnchor() {
  const [ref, rect] = useMeasure<HTMLButtonElement>();
  return (
    <>
      <button ref={ref}>Hover me</button>
      <Tooltip x={rect.left + rect.width / 2} y={rect.top} />
    </>
  );
}
```

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

### useWakeLock live demo with request, forceRequest, and release

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/docs/browser/useWakeLock.mdx

Live example of the useWakeLock hook. It destructures isSupported, isActive, request, forceRequest, and release, and provides callbacks for request, release, and error events. The UI shows the current wake lock state and buttons to request, force request, or release the lock.

```tsx
function Demo() {
  const { isSupported, isActive, request, forceRequest, release } = useWakeLock({
    onRequest: () => console.log("Wake lock acquired"),
    onRelease: () => console.log("Wake lock released"),
    onError: (e) => console.error("Wake lock error:", e),
  });

  if (!isSupported) {
    return <div>Wake Lock API is not supported in your browser.</div>;
  }

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        Wake Lock: <b>{isActive ? "Active" : "Inactive"}</b>
      </div>
      <div>
        <button type="button" onClick={request}>
          Request
        </button>
        <button
          type="button"
          onClick={forceRequest}
          style={{ margin: "0 8px" }}
        >
          Force Request
        </button>
        <button type="button" onClick={release}>
          Release
        </button>
      </div>
    </div>
  );
};
```

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

### useMediaQuery basic usage in React component

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-17-react-media-query-hook.md

Import useMediaQuery from @reactuses/core and call it with a media query string to get a reactive boolean. The example conditionally renders text based on whether the viewport is mobile (max-width: 768px).

```tsx
import { useMediaQuery } from "@reactuses/core";

function Example() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return <p>{isMobile ? "Mobile view" : "Desktop view"}</p>;
}
```

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

### useMediaQuery hook for responsive design

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-13-react-browser-api-hooks.md

Use useMediaQuery to get a boolean that updates in real time when the viewport matches the given media query. This example conditionally renders a mobile or desktop navigation based on a max-width of 768px.

```tsx
import { useMediaQuery } from "@reactuses/core";

function App() {
  const isMobile = useMediaQuery("(max-width: 768px)");

  return <div>{isMobile ? <MobileNav /> : <DesktopNav />}</div>;
}
```

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

### Full API Loading Example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-11-react-infinite-scroll.md

Complete ProductList component using useInfiniteScroll to fetch product data from /api/products. Loads more items when the user scrolls within 200px of the bottom, stops when fewer than 20 items are returned, and displays an end-of-list message.

```tsx
import { useInfiniteScroll } from "@reactuses/core";
import { useRef, useState } from "react";

function ProductList() {
  const containerRef = useRef(null);
  const [products, setProducts] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);

  useInfiniteScroll(
    containerRef,
    async () => {
      if (!hasMore) return;

      const res = await fetch(`/api/products?page=${page}&limit=20`);
      const data = await res.json();

      if (data.length < 20) setHasMore(false);
      setProducts((prev) => [...prev, ...data]);
      setPage((p) => p + 1);
    },
    { distance: 200 }
  );

  return (
    <div ref={containerRef} style={{ height: "80vh", overflow: "auto" }}>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>{product.price}</p>
        </div>
      ))}
      {!hasMore && <p>You have reached the end.</p>}
    </div>
  );
}
```

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

### useInfiniteScroll hook example

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-03-11-react-infinite-scroll.md

Use the useInfiniteScroll hook from @reactuses/core to add infinite scrolling to a feed. The hook monitors the scroll position of the target element and calls the provided async callback when the user scrolls close to the edge, eliminating manual observer setup and cleanup.

```tsx
import { useInfiniteScroll } from "@reactuses/core";
import { useRef, useState } from "react";

function Feed() {
  const ref = useRef(null);
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);

  useInfiniteScroll(
    ref,
    async () => {
      const res = await fetch(`/api/items?page=${page}`);
      const data = await res.json();
      setItems((prev) => [...prev, ...data]);
      setPage((p) => p + 1);
    }
  );

  return (
    <div ref={ref} style={{ height: 500, overflow: "auto" }}>
      {items.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}
```

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

### ReactUse useSpeechRecognition Hook Usage

Source: https://github.com/childrentime/reactuse/blob/main/packages/website-astro/src/content/blog/2026-04-13-react-voice-speech-input.md

A React component using `useSpeechRecognition` from `@reactuses/core`. It provides `isSupported`, `isListening`, `isFinal`, `result`, `error`, `start`, and `stop`. The example shows a button to toggle listening, displays the result with styling based on `isFinal`, and shows an error message if present.

```tsx
import { useSpeechRecognition } from "@reactuses/core";

function VoiceNote() {
  const { isSupported, isListening, isFinal, result, error, start, stop } =
    useSpeechRecognition({
      lang: "en-US",
      interimResults: true,
      continuous: true,
    });

  if (!isSupported) {
    return <p>Speech recognition is not supported in this browser.</p>;
  }

  return (
    <div>
      <button onClick={isListening ? stop : start}>
        {isListening ? "Stop" : "Start"} dictation
      </button>
      <p
        style={{
          fontStyle: isFinal ? "normal" : "italic",
          color: isFinal ? "#0f172a" : "#64748b",
        }}
      >
        {result || "Say something..."}
      </p>
      {error && <p style={{ color: "#ef4444" }}>Error: {error.error}</p>}
    </div>
  );
}
```
Tokens:
Raw