Skip to main content

useArticleSearch

Debounced search across published public articles. Pass the live query string; the hook handles throttling and ignores stale responses.

Usage

SearchBar.tsx
import { useState } from 'react';
import { useArticleSearch } from '@cstar.help/react';

export function SearchBar() {
  const [query, setQuery] = useState('');
  const { results, totalCount, isLoading } = useArticleSearch(query);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search help…"
      />
      {isLoading ? <p>Searching…</p> : <p>{totalCount} results</p>}
      <ul>
        {results.map((a) => (
          <li key={a.id}>
            <a href={`/help/${a.slug}`}>{a.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

What it returns

  • results — array of matching articles with highlighted excerpts.
  • totalCount — total matches (not just the page returned).
  • isLoading — boolean. Goes high while the debounce window resolves.
  • error — Error | null.

Next up