FindableSearch

A document search widget with debounced input, results list, and pagination.

Live Search Demo

Try searching for “fire”, “HVAC”, or “electrical”

Basic Usage

<FindableSearch buildingId="bld-789" />

Omit buildingId to search across all buildings:

<FindableSearch />

Props

Prop	Type	Default	Description
`buildingId`	`string`	—	Scope results to a building. Omit to search all buildings.
`placeholder`	`string`	`'Search documents...'`	Input placeholder text.
`maxResults`	`number`	`10`	Results per page.
`debounceMs`	`number`	`300`	Debounce delay in milliseconds.
`className`	`string`	—	Additional CSS class.
`onHitClick`	`(hit: SearchHit) => void`	—	Called when a result row is clicked.
`renderHit`	`(hit: SearchHit) => JSX.Element`	—	Custom hit renderer for full UI control.

Handling Clicks

<FindableSearch
  buildingId="bld-789"
  onHitClick={(hit) => {
    window.open(`/documents/${hit.id}`);
  }}
/>

Headless Hook: useSearch

import { useSearch } from '@findable-ai/react';

function CustomSearch() {
  const { results, totalHits, isLoading, query, search, loadMore, clear } =
    useSearch({ buildingId: 'bld-789', maxResults: 20 });

  return (
    <div>
      <input
        value={query}
        onChange={(e) => search(e.target.value)}
        placeholder="Search..."
      />
      {isLoading && <span>Loading...</span>}
      <ul>
        {results.map((hit) => (
          <li key={hit.id}>{hit.title || hit.filename}</li>
        ))}
      </ul>
      {results.length < totalHits && (
        <button onClick={loadMore}>Load more</button>
      )}
    </div>
  );
}

useSearch Return Value

Prop	Type	Default	Description
`results`	`SearchHit[]`	—	Current search results.
`totalHits`	`number`	—	Total matching documents.
`isLoading`	`boolean`	—	Whether a search is in progress.
`error`	`Error \| null`	—	The latest search error, if any.
`query`	`string`	—	Current search query.
`search`	`(query: string) => void`	—	Trigger a debounced search.
`loadMore`	`() => void`	—	Load the next page of results.
`clear`	`() => void`	—	Clear the query and results.