Function SearchForm

Search form component for GitHub username search

Features:

  • Real-time search suggestions
  • Loading states
  • Keyboard shortcut
  • Dark mode support
  • Responsive design

Visual Elements:

  • Search icon
  • Input field with placeholder
  • Keyboard shortcut indicator
  • Loading spinner
  • Search button
  • Suggestions dropdown

Interaction States:

  • Input focus/blur handling
  • Loading state display
  • Suggestion selection
  • Form submission

Example

<SearchForm
  username="octocat"
  onUsernameChange={(value) => setUsername(value)}
  onSubmit={handleSearch}
  isLoading={false}
/>
  • SearchForm(props: SearchFormProps): Element

  • Parameters

    • props: SearchFormProps

      Component properties extending SearchFormProps

      Props interface for search form components

      Used by components that implement GitHub username search functionality. Provides consistent prop structure for search-related components.

      SearchFormProps

      • OptionalclassName?: string

        Optional CSS class names for styling

      • OptionaldataTestId?: string

        Optional data-testid for testing

      • OptionalisLoading?: boolean

        Optional loading state indicator

      • onSubmit: (e: FormEvent) => void

        Form submission handler

      • onSuggestionSelect: (username: string) => void

        Callback function triggered when suggestion is selected

      • onUsernameChange: (username: string) => void

        Callback function triggered when username input changes

      • Optionalplaceholder?: string

        Placeholder text for the search input

      • username: string

        Current username value in the search input

    Returns Element

    The search form component

Settings

Member Visibility