`useActorProjectSearch()` hook

useActorProjectSearch() is the search-focused project hook. It returns paged project search results for a free-text query and is a better fit for palettes, jump menus, and search boxes than the full project list hook.

Usage

The following example shows a basic usage of useActorProjectSearch().

import { useState } from 'react';import { useActorProjectSearch } from '@wacht/nextjs';export default function ProjectSearch() {  const [query, setQuery] = useState('');  const { projects, loading } = useActorProjectSearch({ query, limit: 12 });  return (    <div>      <input value={query} onChange={(event) => setQuery(event.target.value)} />      {loading ? <div>Searching…</div> : null}      <ul>        {projects.map((project) => (          <li key={project.id}>{project.name}</li>        ))}      </ul>    </div>  );}

Return value

The hook returns the following fields and methods.

›

projects?: ActorProject[] | undefined;

Current page of project matches.

›

loading?: boolean | undefined;

Whether the current search request is still loading.

›

hasMore?: boolean | undefined;

Whether the backend has more search results beyond this page.

›

nextCursor?: string | undefined | undefined;

Cursor for the next page when the backend returned one.

Overview

The hook trims the query before it builds the cache key, sends the search request to the project search endpoint, and returns the current page of matches plus the pagination metadata from the backend response.

When to use it

Use useActorProjectSearch() when the user is typing a query and you want matching projects instead of the full project list. It fits command menus, search inputs, and other transient navigation UI.

useActorProjectSearch() hook

Usage

Return value

Overview

When to use it

On this page

`useActorProjectSearch()` hook