🔍 Search Input

The Lens system supports flexible search input integration, allowing developers to either use a pre-built SearchInput component or build custom ones using the useDebouncedSearch hook.

🧩 1. Using the Default <SearchInput /> Component

The simplest way to integrate search into a view is by using the ready-to-use component provided by Lens:

import { SearchInput } from "@locospec/lens-react";
 
<div>
    <SearchInput />
<div>

This component automatically connects with the current view context and handles debounced filtering behind the scenes.

🛠 2. Creating a Custom Search Input

For more control or custom designs, you can use the useDebouncedSearch hook to manage your search state and behavior.

Example

const { debouncedQuery, setDebouncedQuery } = useDebouncedSearch({ value: "" });
 
<input
  value={debouncedQuery}
  onChange={(e) => setDebouncedQuery(e.target.value)}
  placeholder="Search..."
/>

You can also build more styled versions — for example:

{debouncedQuery && <button onClick={() => setDebouncedQuery("")}><X /></button>}

⚙️ useDebouncedSearch Hook

This hook provides the logic to debounce search queries and call the search() method from ViewContext after a delay.

Interface

interface UseDebouncedSearchOptions {
  value: string;
  delay?: number; // Default: 500ms
}

Behavior

• Debounces user input based on the delay.
• Automatically updates the view's internal search query.
• Calls the search() function from ViewContext.

Returns

Important

useDebouncedSearch must be used within a ViewContext (i.e., inside a view component using Lens).