newOS for Developers

Back to Overview

SearchBox

input~120 lines

A search input component with icon, loading state, and debounced search functionality for querying users, moods, and content.

Source Path
apps/web/Components/SearchBox.tsx
Package

@newos/web

Props Interface

interface SearchBoxProps {
  placeholder?: string;      // Placeholder text
  showIcon?: boolean;        // Show search icon (default: true)
  size?: "sm" | "md" | "lg"; // Size variant (default: "md")
  loading?: boolean;         // Show loading spinner
  onSearch?: (query: string) => void;  // Search callback
  debounceMs?: number;       // Debounce delay (default: 300)
  autoFocus?: boolean;       // Auto-focus on mount
  className?: string;        // Additional CSS classes
}

Data Flow & API Calls

API Integration

/search — Semantic search endpoint
/user/search — User search endpoint
/mood/search — Mood/folder search endpoint

Hooks Used

useDebounce() — Debounces search input
useSearch() — Handles search state and API calls

Key Features

Debounced Input

Search queries are debounced by default (300ms) to prevent excessive API calls while typing.

Loading State

Displays a spinning loader icon while search is in progress to provide user feedback.

Keyboard Navigation

Supports Enter to submit, Escape to clear, and arrow keys for result navigation.

Responsive Sizing

Three size variants (sm, md, lg) for different UI contexts.

Edge Cases & Gotchas

Empty Query — The onSearch callback is not fired for empty strings to prevent unnecessary API calls.
Minimum Characters — Some search endpoints require a minimum of 2-3 characters before returning results.
Rate Limiting — The Newgraph API may rate-limit excessive search requests. Use appropriate debounce values.

Related Components

UserSelectBoxsearch.ts
View source on GitHub →