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 specific building. Omit to search all.
`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
`query`	`string`	—	Current search query
`search`	`(query: string) => void`	—	Trigger a search (debounced)
`loadMore`	`() => void`	—	Load the next page of results
`clear`	`() => void`	—	Clear query and results