Hooks

Code

import { Button, Input, useDebounce, useInfiniteScroll } from "@fadymondy/nasaq/web";import { useState } from "react";declare function useSearch(q: string): { rows: string[]; hasMore: boolean; loading: boolean; loadMore(): void };export function Search() {  const [q, setQ] = useState("");  const debounced = useDebounce(q, 300);  const { rows, hasMore, loading, loadMore } = useSearch(debounced);  const sentinel = useInfiniteScroll({ onLoadMore: loadMore, hasMore, loading });  return (    <>      <Input value={q} onChange={(e) => setQ(e.target.value)} aria-label="Search" />      <ul>{rows.map((r) => <li key={r}>{r}</li>)}</ul>      {hasMore ? <Button ref={sentinel} onClick={loadMore}>Load more</Button> : null}    </>  );}

Utilities · beta

Live examples and controls: Hooks in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/hooks.json

Plain React hooks with no dependencies. They are safe to render on the server.

When to useCopy Anchor Link

• useDebounce: filter or search after typing stops.
• useDebouncedCallback: autosave, resize handlers, anything that should run once after a burst.
• useMediaQuery / useIsMobile: when the logic, not only the CSS, changes with the screen.
• useInfiniteScroll: feeds and long lists that load page by page.

When not to useCopy Anchor Link

• Layout changes only: use Tailwind breakpoints in CSS, not useIsMobile.
• Very long lists: virtualise the rows; infinite scroll alone keeps every row in the DOM.

ImportCopy Anchor Link

import { useDebounce, useDebouncedCallback, useMediaQuery, useIsMobile, useInfiniteScroll } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Button, Input, useDebounce, useInfiniteScroll } from "@fadymondy/nasaq/web";
import { useState } from "react";

declare function useSearch(q: string): { rows: string[]; hasMore: boolean; loading: boolean; loadMore(): void };

export function Search() {
  const [q, setQ] = useState("");
  const debounced = useDebounce(q, 300);
  const { rows, hasMore, loading, loadMore } = useSearch(debounced);
  const sentinel = useInfiniteScroll({ onLoadMore: loadMore, hasMore, loading });
  return (
    <>
      <Input value={q} onChange={(e) => setQ(e.target.value)} aria-label="Search" />
      <ul>{rows.map((r) => <li key={r}>{r}</li>)}</ul>
      {hasMore ? <Button ref={sentinel} onClick={loadMore}>Load more</Button> : null}
    </>
  );
}

APICopy Anchor Link

UseInfiniteScrollOptions

AccessibilityCopy Anchor Link

• Infinite scroll is invisible to keyboard and screen-reader users: keep a "Load more" button as the sentinel, and announce new rows (aria-live) when it helps.
• useMediaQuery("(prefers-reduced-motion: reduce)") lets JavaScript animations respect the setting.

RTL & i18nCopy Anchor Link

• No text or direction.

Styling & tokensCopy Anchor Link

• No styles.

Do / Don'tCopy Anchor Link

• Do debounce the value you query with, not the input's own value.
• Don't render different content on the server and client from useIsMobile; it is false on the server.

RelatedCopy Anchor Link

• DataState
• Table

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-utilities-hooks--docs